<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <link rel="dns-prefetch" href="https://littleki.gitee.io">
  <title>随手笔记 | Littleki</title>
  <meta name="generator" content="hexo-theme-yilia-plus">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  <meta name="description" content="可以用 DevTools 的 queryObjects()函数测试是否有内存泄漏123queryObjects(Promise)undefinedArray(14)  githooks 钩子没有被触发的原因12345678[core]	repositoryformatversion = 0	filemode = true	bare = false	logallrefupdates = true	i">
<meta name="keywords" content="浏览器,随手笔记,平时遇到的问题">
<meta property="og:type" content="article">
<meta property="og:title" content="随手笔记">
<meta property="og:url" content="https://littleki.gitee.io/2019/04/25/随手笔记/index.html">
<meta property="og:site_name" content="Littleki">
<meta property="og:description" content="可以用 DevTools 的 queryObjects()函数测试是否有内存泄漏123queryObjects(Promise)undefinedArray(14)  githooks 钩子没有被触发的原因12345678[core]	repositoryformatversion = 0	filemode = true	bare = false	logallrefupdates = true	i">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2022-08-03T02:13:19.659Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="随手笔记">
<meta name="twitter:description" content="可以用 DevTools 的 queryObjects()函数测试是否有内存泄漏123queryObjects(Promise)undefinedArray(14)  githooks 钩子没有被触发的原因12345678[core]	repositoryformatversion = 0	filemode = true	bare = false	logallrefupdates = true	i">
  
    <link rel="alternative" href="/atom.xml" title="Littleki" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico">
  
  
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
  
  <link rel="stylesheet" type="text/css" href="/./main.b8fa34.css">
  <style type="text/css">
    
    #container.show {
      background: linear-gradient(200deg,#a0cfe4,#e8c37e);
    }
  </style>
  

  

  
    
 	  <script src="/lib/clickLove.js"></script>
  
  


  

</head>

<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      


<div class="overlay" style="background: #4d4d4d;"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
	<img src="/images/jamse.jpg" class="js-avatar">
	</a>
	<hgroup>
		<h1 class="header-author"><a href="/">Littleki</a></h1>
	</hgroup>
	

		<nav class="header-menu">
			<ul>
			
	<li><a href="/" target="_blank" >主页</a>
	</li>
	
	<li><a href="/2019/04/25/随手笔记/" target="_blank" >随手笔记</a>
	</li>
	
			</ul>
		</nav>
		<nav class="header-smart-menu">
			
	
	<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
	
	
	
	<a q-on="click: openSlider(e, 'friends')" href="javascript:void(0)">友链</a>
	
	
	
	<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
	
	
		</nav>
		<nav class="header-nav">
			<div class="social">
				
	<a class="github" href="https://github.com/littlekie"
		title="GitHub"
		target="_blank" ><i class="icon-github"></i></a>
	
	<a class="gitee" href="https://gitee.com/littleki"
		title="码云"
		target="_blank" ><i class="icon-gitee"></i></a>
	
	<a class="jianshu" href="#"
		title="简书"
		target="_blank" ><i class="icon-jianshu"></i></a>
	
	<a class="cnblog" href="#"
		title="博客园"
		target="_blank" ><i class="icon-cnblog"></i></a>
	
			</div>
		
	
	
	
	
	<div>
		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="52"
			src="//music.163.com/outchain/player?type=2&id=1366551860&auto=1&height=32"></iframe>
	</div>
	
	
	<p style="font-size: 12px;">。。。<p>
			
			
			</nav>
			</header>
</div>

    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      
      
      <a class="forkMe" style="position:absolute;z-index:999;top:0;right:0.5em;" 
        href="https://github.com/littlekie" target="_blank">
        <img src="/img/forkme.png"
          class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
      
      
<nav id="mobile-nav">
  	<div class="overlay js-overlay" style="background: #4d4d4d"></div>
	<div class="btnctn js-mobile-btnctn">
  		<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<a href="/">
					<img src="/images/jamse.jpg" class="js-avatar">
				</a>
			</div>
			<hgroup>
			  <h1 class="header-author js-header-author">Littleki</h1>
			</hgroup>
			
			
			
				
			
				
			
			
			
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/littlekie" title="GitHub"><i class="icon-github"></i></a>
			        
						<a class="gitee" target="_blank" href="https://gitee.com/littleki" title="码云"><i class="icon-gitee"></i></a>
			        
						<a class="jianshu" target="_blank" href="#" title="简书"><i class="icon-jianshu"></i></a>
			        
						<a class="cnblog" target="_blank" href="#" title="博客园"><i class="icon-cnblog"></i></a>
			        
				</div>
			</nav>

			<nav class="header-menu js-header-menu">
				<ul style="width: 50%">
				
				
					<li style="width: 50%"><a href="/">主页</a></li>
		        
					<li style="width: 50%"><a href="/2019/04/25/随手笔记/">随手笔记</a></li>
		        
				</ul>
			</nav>
		</header>				
	</div>
	<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>

      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1"
              class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            <article id="post-随手笔记" class="article article-type-post " itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class=" article-header">
  
  
    <h1 class="article-title" itemprop="name">
      随手笔记
    </h1>
  


  
  
        
        <span id="busuanzi_container_page_pv" style='display:none' class="archive-article-date">
              <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
        </span>

<a href="/2019/04/25/随手笔记/" class="archive-article-date">
        <time datetime="2019-04-25T06:06:44.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-04-25</time>
</a>

  
  
  
<div style="margin-top:10px;">
  <span class="post-time">
    <span class="post-meta-item-icon">
      <!-- fonts.scss -->
      <!-- 百度字体平台:http://fontstore.baidu.com/static/editor/index.html -->
      <i class="icon-statistics"></i>
      <span class="post-meta-item-text"> 字数统计:</span>
      <span class="post-count">27.4k字</span>
    </span>
  </span>

  <span class="post-time">
    &nbsp; | &nbsp;
    <span class="post-meta-item-icon">
      <i class="icon-book icon"></i>
      <span class="post-meta-item-text"> 阅读时长≈</span>
      <span class="post-count">112分</span>
    </span>
  </span>
</div>


  
  </header>
  
  <div class="article-entry" itemprop="articleBody">
    
    <h2 id="可以用-DevTools-的-queryObjects-函数测试是否有内存泄漏"><a href="#可以用-DevTools-的-queryObjects-函数测试是否有内存泄漏" class="headerlink" title="可以用 DevTools 的 queryObjects()函数测试是否有内存泄漏"></a>可以用 DevTools 的 queryObjects()函数测试是否有内存泄漏</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">queryObjects(<span class="built_in">Promise</span>)</span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line"><span class="built_in">Array</span>(<span class="number">14</span>)</span><br></pre></td></tr></table></figure>

<h2 id="githooks-钩子没有被触发的原因"><a href="#githooks-钩子没有被触发的原因" class="headerlink" title="githooks 钩子没有被触发的原因"></a>githooks 钩子没有被触发的原因</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">[core]</span><br><span class="line">	repositoryformatversion = 0</span><br><span class="line">	filemode = <span class="literal">true</span></span><br><span class="line">	bare = <span class="literal">false</span></span><br><span class="line">	logallrefupdates = <span class="literal">true</span></span><br><span class="line">	ignorecase = <span class="literal">true</span></span><br><span class="line">	precomposeunicode = <span class="literal">true</span></span><br><span class="line">	hooksPath = .husky <span class="comment">#这一行删除</span></span><br></pre></td></tr></table></figure>

<p>有可能之前安装了 .husky 后面又没用了把 hooksPath = .husky 这一行删除</p>
<h3 id="git-hooks-里sample文件-的作用"><a href="#git-hooks-里sample文件-的作用" class="headerlink" title=".git hooks 里sample文件 的作用"></a>.git hooks 里sample文件 的作用</h3><p>pre-commit.sample文件看一下其中的内容，大致意思是说这是一个示例，做了一些格式方面的检测，这个脚本默认是不生效的，如果要生效，把文件名改为pre-commit即可</p>
<h2 id="怎么写出优质的-JavaScript-代码"><a href="#怎么写出优质的-JavaScript-代码" class="headerlink" title="怎么写出优质的 JavaScript 代码?"></a>怎么写出优质的 JavaScript 代码?</h2><h3 id="指数幂"><a href="#指数幂" class="headerlink" title="指数幂"></a>指数幂</h3><p>我们可以使用Math.pow()方法来得到一个数字的幂。有一种更短的语法来实现，即双星号 (**)。//Longhand </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> power = <span class="built_in">Math</span>.pow(<span class="number">4</span>, <span class="number">3</span>); <span class="comment">// 64 </span></span><br><span class="line"><span class="comment">// Shorthand </span></span><br><span class="line"><span class="keyword">const</span> power = <span class="number">4</span>**<span class="number">3</span>; <span class="comment">// 64</span></span><br></pre></td></tr></table></figure>

<h3 id="数字分隔符"><a href="#数字分隔符" class="headerlink" title="数字分隔符"></a>数字分隔符</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 旧语法</span></span><br><span class="line"><span class="keyword">let</span> number = <span class="number">98234567</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 新语法</span></span><br><span class="line"><span class="keyword">let</span> number = <span class="number">98</span>_234_567</span><br></pre></td></tr></table></figure>

<h3 id="使用方法链（尤其是类）"><a href="#使用方法链（尤其是类）" class="headerlink" title="使用方法链（尤其是类）"></a>使用方法链（尤其是类）</h3><p>播放器对象/类是这种情况，请使用方法链接。<br>需要做的就是从要链接的函数中返回对象的实例。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Player</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span> (name, score, position) &#123;</span><br><span class="line">    <span class="keyword">this</span>.position = position;</span><br><span class="line">    <span class="keyword">this</span>.score = score;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">  &#125;</span><br><span class="line">  setName(name) &#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>; <span class="comment">// &lt;-- THIS</span></span><br><span class="line">  &#125;</span><br><span class="line">  setPosition(position) &#123;</span><br><span class="line">    <span class="keyword">this</span>.position = position;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>; <span class="comment">// &lt;-- THIS</span></span><br><span class="line">  &#125;</span><br><span class="line">  setScore(score) &#123;</span><br><span class="line">    <span class="keyword">this</span>.score = score;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>; <span class="comment">// &lt;-- THIS</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> player = <span class="keyword">new</span> Player();</span><br><span class="line">player.setScore(<span class="number">0</span>).setName(<span class="string">'Sudongyuer'</span>).setPosition([<span class="number">2</span>, <span class="number">0</span>]);</span><br><span class="line"><span class="comment">// SUPER COOL 😎</span></span><br><span class="line"><span class="built_in">console</span>.log(player)</span><br></pre></td></tr></table></figure>

<h2 id="代码可维护性、可复用性和可扩展性的区别"><a href="#代码可维护性、可复用性和可扩展性的区别" class="headerlink" title="代码可维护性、可复用性和可扩展性的区别"></a>代码可维护性、可复用性和可扩展性的区别</h2><ul>
<li>在《Java设计模式》一书中对<code>可维护性</code>的定义为：指软件能够被理解、改正、适应及扩展的难易程度。</li>
<li>对<code>可复用性</code>的定义为：指软件能够被重复使用的难易程度。<br>一般般说到可维护性指的是改正性维护，根据修复一个问题所花的平均时间和修复正确的百分比来衡量<br>广义上的可维护性也包括扩展可维护性，此时可扩展性是可维护性的一部分。（可以想见可理解性也是可维护性的一部分）<br>改正侧重改，扩展侧重增。</li>
</ul>
<h4 id="可维护性"><a href="#可维护性" class="headerlink" title="可维护性"></a>可维护性</h4><p>可维护性表明了<code>在软件中纠正一个缺陷或做一次更改的简易程度</code>。</p>
<p>可维护性取决于理解软件、更改软件和测试软件的简易程度，可维护性与灵活性密切相关。<br>高可维护性对于那些经历周期性更改的产品或快速开发的产品很重要。<br>你可以根据修复一个问题所花的平均时间和修复正确的百分比来衡量可维护性。</p>
<h4 id="可扩展性"><a href="#可扩展性" class="headerlink" title="可扩展性"></a>可扩展性</h4><p>可扩展性反映软件适应“变化”的能力。</p>
<p>在软件开发过程中，“变化”是司空见惯的事情，如需求、设计的变化，算法的改进，程序的变化等等。</p>
<p>现代软件产品通常采用“增量开发模式”，不断推出新版本，获取增值利润。可扩展性越来越重要。<br>可扩展性是系统设计阶段重点考虑的质量属性。<br>谈到软件的可扩展性，开发人员首先想到的是怎样提高可扩展性，于是努力去设计很好的体系结构来提高可扩展性，却不考虑该不该做这件事。<br>从商业角度考虑，如果某个软件将不断地推出新版本，那么可扩展性很重要。<br>但是如果软件永远都不会有下个版本（一次性买卖），那么根本无需提高可扩展性。</p>
<h4 id="一、变量"><a href="#一、变量" class="headerlink" title="一、变量"></a>一、变量</h4><ol>
<li><p>用有意义且常用的单词命名</p>
</li>
<li><p>对同一类型的变量使用相同的命名保持统一</p>
</li>
<li><p>每个常量都该命名(全大写)</p>
</li>
<li><p>避免无意义的命名</p>
</li>
<li><p>传参使用默认值</p>
</li>
</ol>
<h4 id="二、函数"><a href="#二、函数" class="headerlink" title="二、函数"></a>二、函数</h4><ol>
<li><p>函数参数( 最好 2 个或更少 )<br>如果参数超过两个，建议使用 ES6 的解构语法，不用考虑参数的顺序。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Bad:</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createMenu</span>(<span class="params"> title, body, buttonText, cancellable </span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Good:</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createMenu</span>(<span class="params"> &#123; title, body, buttonText, cancellable &#125; </span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br><span class="line">createMenu(&#123;</span><br><span class="line">    title: <span class="string">'Foo'</span>,</span><br><span class="line">    body: <span class="string">'Bar'</span>,</span><br><span class="line">    buttonText: <span class="string">'Baz'</span>,</span><br><span class="line">    cancellable: <span class="literal">true</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
</li>
<li><p>一个方法只做一件事情</p>
</li>
<li><p>函数名上体现它的作用</p>
</li>
<li><p>删除重复代码，合并相似函数</p>
</li>
<li><p>使用 Object.assign 设置默认属性</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Bad:</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createMenu</span>(<span class="params">config</span>) </span>&#123;</span><br><span class="line">  config.title = config.title || <span class="string">'Foo'</span>;</span><br><span class="line">  config.body = config.body || <span class="string">'Bar'</span>;</span><br><span class="line">  config.buttonText = config.buttonText || <span class="string">'Baz'</span>;</span><br><span class="line">  config.cancellable = config.cancellable !== <span class="literal">undefined</span> ? config.cancellable : <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Good:</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createMenu</span>(<span class="params">config</span>) </span>&#123;</span><br><span class="line">  config = <span class="built_in">Object</span>.assign(&#123;</span><br><span class="line">    title: <span class="string">'Foo'</span>,</span><br><span class="line">    body: <span class="string">'Bar'</span>,</span><br><span class="line">    buttonText: <span class="string">'Baz'</span>,</span><br><span class="line">    cancellable: <span class="literal">true</span></span><br><span class="line">  &#125;, config);</span><br><span class="line">  <span class="comment">// config : &#123;title: "Order", body: "Bar", buttonText: "Send", cancellable: true&#125;</span></span><br><span class="line">&#125;</span><br><span class="line">createMenu(menuConfig);</span><br></pre></td></tr></table></figure>

<h3 id="用枚举来约定变量的使用与赋值"><a href="#用枚举来约定变量的使用与赋值" class="headerlink" title="用枚举来约定变量的使用与赋值"></a>用枚举来约定变量的使用与赋值</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">enum</span> Menu &#123;</span><br><span class="line">    title,</span><br><span class="line">    body,</span><br><span class="line">    buttonText,</span><br><span class="line">    cancellable</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> currentMenu: Menu = Menu.title;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setMenu</span>(<span class="params">menu:Menu</span>)</span>&#123;</span><br><span class="line">  currentMenu = menu;</span><br><span class="line">&#125;</span><br><span class="line">setMenu(Menu.title);</span><br></pre></td></tr></table></figure>

<h3 id="every"><a href="#every" class="headerlink" title="every"></a>every</h3><p>every()方法的定义与用法：</p>
<p>every()方法用于检测数组中的所有元素是否都满足指定条件（该条件为一个函数）。<br>every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a  = [<span class="number">20</span>,<span class="number">18</span>,<span class="number">1</span>,<span class="number">20</span>,<span class="number">2</span>]</span><br><span class="line"><span class="keyword">const</span> flag = a.every(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(item)</span><br><span class="line">  <span class="keyword">return</span> item &gt;  <span class="number">18</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// flag :true</span></span><br></pre></td></tr></table></figure>

<h3 id="Husky钩子在SourceTree中报错：-husky-pre-commit-Line-4-npm-command-not-found"><a href="#Husky钩子在SourceTree中报错：-husky-pre-commit-Line-4-npm-command-not-found" class="headerlink" title="Husky钩子在SourceTree中报错：.husky/pre-commit: Line 4 npm: command not found"></a>Husky钩子在SourceTree中报错：.husky/pre-commit: Line 4 npm: command not found</h3><p>在命令行中可以正常commit，并正确触发钩子，但是，在SourceTree中，却报错了：</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.husky/pre-commit: Line <span class="number">4</span> npm: command <span class="keyword">not</span> found</span><br></pre></td></tr></table></figure>

<h4 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h4><p>找到所需命令所在路径，然后添加到~/.huskyrc文件中。<br>用以下命令自动创建文件并添加路径：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">echo <span class="string">'export PATH="/usr/local/bin/:$PATH"'</span> &gt;&gt; ~<span class="regexp">/.huskyrc</span></span><br></pre></td></tr></table></figure>

<h4 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h4><p><a href="https://xmanyou.com/sourcetree-husky-npm-command-not-found/" target="_blank" rel="noopener">https://xmanyou.com/sourcetree-husky-npm-command-not-found/</a></p>
<h3 id="TDD-驱动测试开发"><a href="#TDD-驱动测试开发" class="headerlink" title="TDD 驱动测试开发"></a>TDD 驱动测试开发</h3><ul>
<li>测试驱动开发（Test-Driven Development，TDD）<br>T –&gt; tasking<br>D –&gt; tasking<br>D –&gt; tasking<h3 id="mac-使用code命令打开VSCode"><a href="#mac-使用code命令打开VSCode" class="headerlink" title="mac 使用code命令打开VSCode"></a>mac 使用code命令打开VSCode</h3>我们在mac的终端可以使用 open .打开文件夹<br>如果我们想用vs-code打开文件夹,用的命令是 code .,不过你得先按照code<br>安装code：打开VSCode –&gt; command+shift+p –&gt; 输入shell command –&gt; 点击提示Shell Command: Install ‘code’ command in PATH运行<br>使用：打开终端，cd到要用VSCode打开的文件夹，然后输入命令code .即可打开</li>
</ul>
<h3 id="工程化方面"><a href="#工程化方面" class="headerlink" title="工程化方面"></a>工程化方面</h3><p>lerna：Lerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目。<br>prettier：Prettier 中文的意思是漂亮的、美丽的，是一个流行的代码格式化的工具。<br>tslint：TSLint 是可扩展的静态分析工具，用于检查 TypeScript 代码的可读性，可维护性和功能性错误。<br>commitizen &amp; cz-conventional-changelog：用于帮助我们生成符合规范的 commit message。<br>husky：husky 能够防止不规范代码被 commit、push、merge 等等。<br>jest：Jest 是由 Facebook 维护的 JavaScript 测试框架。<br>coveralls：用于获取 Coveralls.io 的覆盖率报告，并在 README 文件中添加一个不错的覆盖率按钮。<br>vuepress：Vue 驱动的静态网站生成器，它用于生成 BetterScroll 2.0 的文档。</p>
<p>作者：阿宝哥<br>链接：<a href="https://juejin.cn/post/6876943860988772360" target="_blank" rel="noopener">https://juejin.cn/post/6876943860988772360</a><br>来源：稀土掘金</p>
<h3 id="页面载入进度条"><a href="#页面载入进度条" class="headerlink" title="页面载入进度条"></a>页面载入进度条</h3><ul>
<li>页面路由切换时，附带一个加载进度条会显得非常友好，不至于白屏时间过长，让用户以为页面假死。这时候我们可以用到nprogress，在路由切换时开启和关闭：import NProgress from ‘nprogress’;</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">router.beforeEach(<span class="keyword">async</span> (to, <span class="keyword">from</span>, next) =&gt; &#123;</span><br><span class="line">  NProgress.start();</span><br><span class="line">&#125;);</span><br><span class="line">router.afterEach(<span class="function">(<span class="params">to</span>) =&gt;</span> &#123;</span><br><span class="line">  NProgress.done();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>作者：codexu<br>链接：<a href="https://zhuanlan.zhihu.com/p/428497238" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/428497238</a><br>来源：知乎<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
<h3 id="vite"><a href="#vite" class="headerlink" title="vite"></a>vite</h3><ol>
<li><p>如何加载依赖包？<br>在 ESModule 只会加载 <code>./</code>或者<code>/</code> 开头 的路径</p>
</li>
<li><p>如何加载 SFC组件(.vue)?</p>
</li>
</ol>
<p>第一步 vue文件 =&gt; template script (compiler-sfc))</p>
<h3 id="是因为很多你想做的项目，要么在GitHub上已经有了，要么已经在文档中被人讨论过了，那为什么是你做？为什么你更有可能去做成？"><a href="#是因为很多你想做的项目，要么在GitHub上已经有了，要么已经在文档中被人讨论过了，那为什么是你做？为什么你更有可能去做成？" class="headerlink" title="是因为很多你想做的项目，要么在GitHub上已经有了，要么已经在文档中被人讨论过了，那为什么是你做？为什么你更有可能去做成？"></a>是因为很多你想做的项目，要么在GitHub上已经有了，要么已经在文档中被人讨论过了，那为什么是你做？为什么你更有可能去做成？</h3><p>玉伯说：这个问题的一个“政治正确”的答案是和你的业务有相关性，更实际的可能是和你这个人更有关系，是你内心想不想做，愿不愿意去长期的投入。</p>
<p>比如Ant Design、AntV，其实当时是集团更有机会去做的，因为集团有数据产品技术部，他们有很多业务，在这些业务土壤下是更有机会去长出这些项目的，但是他们缺人。所以对这个问题我的回答是，很多情况下，人的要素是比业务更重要的。只要你对事情是笃定想要去做的，大胆去做就好了。</p>
<h3 id="可选链-，空值合并运算符"><a href="#可选链-，空值合并运算符" class="headerlink" title="可选链?. ，空值合并运算符??"></a>可选链<code>?.</code> ，空值合并运算符<code>??</code></h3><ul>
<li>空值合并操作符（<code>??</code>）是一个逻辑操作符，当左侧的操作数为 <code>null</code> 或者 <code>undefined</code> 时，返回其右侧操作数，否则返回左侧操作数。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> foo = <span class="literal">null</span> ?? <span class="string">'default string'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(foo);</span><br><span class="line"><span class="comment">// expected output: "default string"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> baz = <span class="literal">undefined</span> ?? <span class="number">42</span>;</span><br><span class="line"><span class="built_in">console</span>.log(baz);</span><br><span class="line"><span class="comment">// expected output: 42</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> baz1 = <span class="number">0</span> ?? <span class="number">42</span>;</span><br><span class="line"><span class="built_in">console</span>.log(baz1);</span><br><span class="line"><span class="comment">// expected output: 0</span></span><br></pre></td></tr></table></figure>

<p>可选链式操作符（<code>?.</code>) 与 <code>??</code> 一样，可能为 undefined 与 null 的对象时，可选链式操作符非常有用。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = &#123; <span class="attr">someFooProp</span>: <span class="string">"hi"</span> &#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(foo.someFooProp?.toUpperCase()); <span class="comment">// "HI"</span></span><br><span class="line"><span class="built_in">console</span>.log(foo.someBarProp?.toUpperCase()); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<h3 id="动画卡顿分析"><a href="#动画卡顿分析" class="headerlink" title="动画卡顿分析"></a>动画卡顿分析</h3><h4 id="动画卡顿的原因"><a href="#动画卡顿的原因" class="headerlink" title="动画卡顿的原因"></a>动画卡顿的原因</h4><p>大多数设备的刷新频率是60次/秒，也就是1秒钟的动画是由60个画面连在一起生成的，所以要求浏览器对每一帧画面的渲染工作要在16ms内完成。当渲染时间超出16ms时，1秒钟内少于60个画面生成，就会有不连贯、卡顿的感觉，影响用户体验。</p>
<p>一个页面帧在客户端的渲染分为以下几步：</p>
<p>JavaScript：JavaScript实现动画效果，DOM操作等。<br>Style（样式计算）：确认每个DOM元素应用的CSS样式规则。<br>Layout（布局）：计算每个DOM元素最终在屏幕上的大小和位置。由于DOM元素的布局是相对的，所以当某个元素发生变化影响了布局时，其他元素也会随之变化，则需要回退重新渲染，这个过程称之为reflow。<br>Paint（绘制）：在多个层上绘制DOM元素的文字、颜色、图像、边框和阴影等。<br>Composite（Render Layer合并）：按照合理的顺序合并图层并显示到屏幕上。 浏览器在实际渲染页面的时候需要经过一系列的映射，由HTML页面构建出来的DOM树到最终的图层，映射过程如下图(来源：参考[3])所示（注意下图类名在后续有所更改，RenderObject-&gt;LayoutObject，RenderLayer-&gt;PaintLayer）：<br>Node-&gt;RenderObject：DOM树的每个Node都有一个对应的RenderObject（一对一关系，RenderObject包含了Node的内容）；</p>
<p>RenderObject -&gt; RenderLayer：一个或多个RenderObject对应一个RenderLayer（多对一），RenderLayer用于保证元素之间的层级关系，一般来说位于同一位置的且层级相同的元素位于同一个Render Layer，只有某些特殊的RenderObject会专门创建一个新的渲染层，其他的RenderObject与第一个拥有RenderLayer的祖先元素共用一个。常见的生成RenderLayer的RenderObject拥有以下的一种特征</p>
<h4 id="优化方法"><a href="#优化方法" class="headerlink" title="优化方法"></a>优化方法</h4><p>结合页面渲染流程，这里将结合一些测试代码，分析动画的各种优化方案和效果：</p>
<p>JavaScript：优化JavaScript的执行效率<br>requestAnimationFrame代替setTimeout和setInterval<br>可并行的DOM元素更新划分为多个小任务<br>DOM无关的耗时操作放到Web Workers中<br>Style：降低样式计算复杂度和范围<br>降低样式选择器的复杂度<br>减少需要执行样式计算的元素个数<br>Layout：避免大规模、复杂的布局<br>避免频繁改变布局<br>用flexbox布局替代老的布局模型<br>避免强制同步布局事件<br>Paint/Composite：GPU加速<br>将移动或渐变元素由渲染层（RenderLayer）提升为合成层（Compositing Layer）<br>避免提升合成层的陷阱<br>JavaScript：优化JavaScript的执行效率</p>
<ol>
<li>requestAnimationFrame代替setTimeout和setInterval<br>为什么setTimeout和setInterval不好？<br>由于js是单线程执行，所以为了防止某个任务执行时间过长而导致进程阻塞，js中存在异步队列的概念，对于如setTimeout和ajax请求都是把进程放到了异步队列中，当主进程为空时才执行异步队列中的任务。所以 setTimeout和setInterval无法保证回调函数的执行时机，可能会在一帧之内执行多次导致多次页面渲染，浪费CPU资源甚至产生卡顿，或者是在一帧即将结束时执行导致重新渲染，出现掉帧的情况。<br>requestAnimationFrame是怎么优化的？</li>
</ol>
<p>CPU节能，当页面被隐藏或最小化时，暂停渲染。<br>函数节流，其循环间隔是由屏幕刷新频率决定的，保证回调函数在屏幕的每一次刷新间隔中只执行一次。<br>优化效果具体如何？DEMO<br>通过chrome的performance面板查看具体表现的差别。<br>通过setTimeout进行了3次渲染，而且有长时间帧出现：</p>
<p>使用 requestAnimationFrameDOM操作部分合并，只进行了2次渲染，长时间帧也被优化：</p>
<p><a href="https://juejin.cn/post/6844903796817002504" target="_blank" rel="noopener">参考链接</a></p>
<h4 id="requestAnimationFrame"><a href="#requestAnimationFrame" class="headerlink" title="requestAnimationFrame"></a>requestAnimationFrame</h4><p>1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。<br>2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。</p>
<p>作者：我是一个前端<br>链接：<a href="https://www.jianshu.com/p/fa5512dfb4f5" target="_blank" rel="noopener">https://www.jianshu.com/p/fa5512dfb4f5</a><br>来源：简书<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
<h4 id="优化方法-1"><a href="#优化方法-1" class="headerlink" title="优化方法"></a>优化方法</h4><h3 id="querySelector和getElementById性能分析与使用选择"><a href="#querySelector和getElementById性能分析与使用选择" class="headerlink" title="querySelector和getElementById性能分析与使用选择"></a>querySelector和getElementById性能分析与使用选择</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.time(<span class="string">'querySelector'</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">100000</span>; i++) &#123;</span><br><span class="line">  <span class="built_in">document</span>.querySelector(<span class="string">"#wp_editbtns"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.timeEnd(<span class="string">'querySelector'</span>);</span><br><span class="line"><span class="comment">//querySelector: 10.057373046875 ms</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.time(<span class="string">'getElementById'</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">100000</span>; i++) &#123;</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">"wp_editbtns"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.timeEnd(<span class="string">'getElementById'</span>);</span><br><span class="line"><span class="comment">// getElementById: 4.985595703125 ms</span></span><br></pre></td></tr></table></figure>

<p>querySelector的耗时明显多了好多<br>得到集合时间对比相差巨大。可是现在主流框架，比如jquery，手机上的框架jqmobi等内部实现查找元都是使用的querySelector，等方法，性能低的方法被使用唯一理由就是它用着方便。</p>
<ul>
<li>得到的元素不是需要很麻烦的多次getElementBy..的话，尽量使用getElementBy..,因为他快些。</li>
<li>得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector，方便。</li>
<li>看实际情况，你决定方便优先还是性能优先，<h2 id="URLSearchParams"><a href="#URLSearchParams" class="headerlink" title="URLSearchParams"></a>URLSearchParams</h2></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Pass in a string literal</span></span><br><span class="line"><span class="keyword">var</span> url = <span class="keyword">new</span> URL(<span class="string">'https://example.com?foo=1&amp;bar=2'</span>);</span><br><span class="line"><span class="comment">// Retrieve from window.location</span></span><br><span class="line"><span class="keyword">var</span> url2 = <span class="keyword">new</span> URL(<span class="built_in">window</span>.location);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Retrieve params via url.search, passed into ctor</span></span><br><span class="line"><span class="keyword">var</span> params = <span class="keyword">new</span> URLSearchParams(url.search);</span><br><span class="line"><span class="keyword">var</span> params2 = <span class="keyword">new</span> URLSearchParams(url2.search);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Pass in a sequence</span></span><br><span class="line"><span class="keyword">var</span> params3 = <span class="keyword">new</span> URLSearchParams([[<span class="string">"foo"</span>, <span class="number">1</span>],[<span class="string">"bar"</span>, <span class="number">2</span>]]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Pass in a record</span></span><br><span class="line"><span class="keyword">var</span> params4 = <span class="keyword">new</span> URLSearchParams(&#123;<span class="string">"foo"</span> : <span class="number">1</span> , <span class="string">"bar"</span> : <span class="number">2</span>&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="vue-cli3-单独打包库"><a href="#vue-cli3-单独打包库" class="headerlink" title="vue-cli3 单独打包库"></a>vue-cli3 单独打包库</h2><p><a href="https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93" target="_blank" rel="noopener">参考链接</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue-cli-service build --target lib --name port [<span class="string">'./src/_port/index.js'</span>]</span><br></pre></td></tr></table></figure>

<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">File                     Size                     Gzipped</span><br><span class="line"></span><br><span class="line">dist/myLib.umd.min.js    13.28 kb                 8.42 kb</span><br><span class="line">dist/myLib.umd.js        20.95 kb                 10.22 kb</span><br><span class="line">dist/myLib.common.js     20.57 kb                 10.09 kb</span><br><span class="line">dist/myLib.css           0.33 kb                  0.23 kb</span><br></pre></td></tr></table></figure>

<h2 id="Node-Sass-could-not-find-a-binding-for-your-current-environment-OS-X-64-bit-with-Node-js-6-x"><a href="#Node-Sass-could-not-find-a-binding-for-your-current-environment-OS-X-64-bit-with-Node-js-6-x" class="headerlink" title="Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 6.x"></a>Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 6.x</h2><blockquote>
<p>进入project根目录，执行rebuild命令</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm rebuild node-sass</span><br></pre></td></tr></table></figure>

<h2 id="在-Mac-下安装-Node-与-NPM"><a href="#在-Mac-下安装-Node-与-NPM" class="headerlink" title="在 Mac 下安装 Node 与 NPM"></a>在 Mac 下安装 Node 与 NPM</h2><h3 id="安装-Node"><a href="#安装-Node" class="headerlink" title="安装 Node"></a>安装 Node</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">brew search node <span class="comment"># 安装之前可以先看看 brew 支持的 node 版本</span></span><br><span class="line">brew install node  <span class="comment"># 安装默认最新版本，如果要指定版本的话可以这样 brew install node@10</span></span><br><span class="line"> </span><br><span class="line">node -v <span class="comment"># 如果安装成功会输出 Node 版本</span></span><br></pre></td></tr></table></figure>

<p><strong>注意</strong> 安装 Node 的时候 NPM 会自动被安装，所以无需进行下一步。</p>
<h3 id="安装-NPM"><a href="#安装-NPM" class="headerlink" title="安装 NPM"></a>安装 NPM</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">brew search npm <span class="comment"># 安装之前可以先看看 brew 支持的 npm 版本</span></span><br><span class="line">brew install npm  <span class="comment"># 安装默认最新版本</span></span><br><span class="line"> </span><br><span class="line">npm -v <span class="comment"># 如果安装成功会输出 NPM 版本</span></span><br></pre></td></tr></table></figure>

<h3 id="安装-Node-1"><a href="#安装-Node-1" class="headerlink" title="安装 Node"></a>安装 Node</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">brew search node <span class="comment"># 安装之前可以先看看 brew 支持的 node 版本</span></span><br><span class="line">brew install node  <span class="comment"># 安装默认最新版本，如果要指定版本的话可以这样 brew install node@10</span></span><br><span class="line"> </span><br><span class="line">node -v <span class="comment"># 如果安装成功会输出 Node 版本</span></span><br></pre></td></tr></table></figure>

<h2 id="params动态路由传参"><a href="#params动态路由传参" class="headerlink" title="params动态路由传参"></a>params动态路由传参</h2><p>params动态路由传参一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;      </span><br><span class="line">    path: <span class="string">'/detail/:id'</span>,      </span><br><span class="line">    name: <span class="string">'Detail'</span>,      </span><br><span class="line">    component: Detail    </span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>注意</strong>，params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的，因为你总不可能要求用户不能刷新页面吧</p>
</blockquote>
<h2 id="在引用子组件里的-click-方法不生效"><a href="#在引用子组件里的-click-方法不生效" class="headerlink" title="在引用子组件里的 click 方法不生效"></a>在引用子组件里的 click 方法不生效</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"disable-hover button ion-button"</span></span></span><br><span class="line"><span class="tag">          <span class="attr">:class</span>=<span class="string">"[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"button-inner"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"button-effect"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-button</span> @<span class="attr">click.native</span>=<span class="string">"primary()"</span> <span class="attr">color</span>=<span class="string">"primary"</span>&gt;</span>primary<span class="tag">&lt;/<span class="name">ion-button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>据<code>Vue2.x</code>官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符</p>
<p>注意：<strong>Vue.3x</strong> 已经移除 <del>v-on.native</del></p>
<h2 id="commit-lint"><a href="#commit-lint" class="headerlink" title="commit-lint"></a>commit-lint</h2><p>可以帮助我们检查提交的 commit 信息，它强制约束我们的 commit 信息必须在开头附加指定类型，用于标示本次提交的大致意图，支持的类型关键字有：</p>
<ul>
<li>feat：表示添加一个新特性；</li>
<li>chore：表示做了一些与特性和修复无关的「家务事」；</li>
<li>fix：表示修复了一个 Bug；</li>
<li>refactor：表示本次提交是因为重构了代码；</li>
<li>style：表示代码美化或格式化；</li>
</ul>
<h2 id="CSS-变量教程"><a href="#CSS-变量教程" class="headerlink" title="CSS 变量教程"></a>CSS 变量教程</h2><a id="more"></a>
<h3 id="一、变量的声明"><a href="#一、变量的声明" class="headerlink" title="一、变量的声明"></a>一、变量的声明</h3><p>声明变量的时候，变量名前面要加两根连词线（–）。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">--foo</span>: <span class="number">#7F583F</span>;</span><br><span class="line">  <span class="attribute">--bar</span>: <span class="number">#F7EFD2</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>二、var() 函数<br>var()函数用于读取变量。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">--foo</span>: <span class="number">#7F583F</span>;</span><br><span class="line">  <span class="attribute">--bar</span>: <span class="number">#F7EFD2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">  var(--color)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="三、作用域"><a href="#三、作用域" class="headerlink" title="三、作用域"></a>三、作用域</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-pseudo">:root</span> &#123; <span class="attribute">--color</span>: blue; &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-tag">div</span> &#123; <span class="attribute">--color</span>: green; &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-id">#alert</span> &#123; <span class="attribute">--color</span>: red; &#125;</span></span><br><span class="line"><span class="css">  * &#123; <span class="attribute">color</span>: <span class="built_in">var</span>(--color); &#125;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>蓝色<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>绿色<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"alert"</span>&gt;</span>红色<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。<h3 id="JavaScript-也可以检测浏览器是否支持-CSS-变量。"><a href="#JavaScript-也可以检测浏览器是否支持-CSS-变量。" class="headerlink" title="JavaScript 也可以检测浏览器是否支持 CSS 变量。"></a>JavaScript 也可以检测浏览器是否支持 CSS 变量。</h3></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> isSupported =</span><br><span class="line">  <span class="built_in">window</span>.CSS &amp;&amp;</span><br><span class="line">  <span class="built_in">window</span>.CSS.supports &amp;&amp;</span><br><span class="line">  <span class="built_in">window</span>.CSS.supports(<span class="string">'--a'</span>, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (isSupported) &#123;</span><br><span class="line">  <span class="comment">/* supported */</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="comment">/* not supported */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Proxy函数"><a href="#Proxy函数" class="headerlink" title="Proxy函数"></a>Proxy函数</h2><p>Proxy 致代理最外层 对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    b:&#123;<span class="attr">c</span>:<span class="number">1</span>&#125;,</span><br><span class="line">    d:<span class="number">2</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="keyword">var</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(obj, &#123;</span><br><span class="line">  <span class="keyword">get</span>: function(target, propKey) &#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'target'</span>,target)</span><br><span class="line">    <span class="keyword">return</span> <span class="number">35</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(proxy.b.c) <span class="comment">// 访问不到</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">      <span class="keyword">var</span> de = <span class="built_in">Object</span>.defineProperty(obj,<span class="string">'d'</span>,&#123;</span><br><span class="line">        <span class="keyword">get</span>()&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(<span class="string">'get'</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">          <span class="keyword">var</span> obj = &#123;</span><br><span class="line">        b:&#123;<span class="attr">c</span>:<span class="number">1</span>&#125;,</span><br><span class="line">        d:<span class="number">2</span>,</span><br><span class="line">        f:<span class="number">3</span></span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">      <span class="keyword">var</span> de = <span class="built_in">Object</span>.defineProperty(obj,<span class="string">'d'</span>,&#123;</span><br><span class="line">        <span class="keyword">get</span>()&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(<span class="string">'get'</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;)</span><br><span class="line">      <span class="comment">// defineProperty 只针对单个属性的基本类型监测 </span></span><br><span class="line">      <span class="comment">// 对象无法监听是否引用活改变</span></span><br></pre></td></tr></table></figure>

<h3 id="Proxy的优势如下"><a href="#Proxy的优势如下" class="headerlink" title="Proxy的优势如下"></a>Proxy的优势如下</h3><p>Proxy可以直接监听整个对象而非属性。<br>Proxy可以直接监听数组的变化。<br>Proxy有13中拦截方法，如ownKeys、deleteProperty、has 等是 Object.defineProperty 不具备的。<br>Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改;<br>Proxy做为新标准将受到浏览器产商重点持续的性能优化,也就是传说中的新标准的性能红利。</p>
<h3 id="Object-defineProperty-的优势如下"><a href="#Object-defineProperty-的优势如下" class="headerlink" title="Object.defineProperty 的优势如下"></a>Object.defineProperty 的优势如下</h3><p>兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平。<br>Object.defineProperty 不足在于：</p>
<p>Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。<br>Object.defineProperty不能监听数组。是通过重写数据的那7个可以改变数据的方法来对数组进行监听的。<br>Object.defineProperty 也不能对 es6 新产生的 Map,Set 这些数据结构做出监听。<br>Object.defineProperty也不能监听新增和删除操作，</p>
<h2 id="vue3-源码大多是高阶函数，-做了类似柯里话函数"><a href="#vue3-源码大多是高阶函数，-做了类似柯里话函数" class="headerlink" title="vue3 源码大多是高阶函数， 做了类似柯里话函数"></a>vue3 源码大多是高阶函数， 做了类似柯里话函数</h2><h2 id="vue3-stup-为什么比mixin好用"><a href="#vue3-stup-为什么比mixin好用" class="headerlink" title="vue3 stup 为什么比mixin好用"></a>vue3 stup 为什么比mixin好用</h2><ol>
<li>如果组件内引用了多个mixin 后，无法知道 组件的数据属于哪个mixin,不好追踪到数据的来源<br>但是使用 setup 可以追踪到数据属于哪个 useFuntion </li>
<li>mixin 需要考虑到命名冲突，被其他mixin 里的方法或者data 替换</li>
<li>setup 可以比较容易做类型推倒<h2 id="vscode-代码片段"><a href="#vscode-代码片段" class="headerlink" title="vscode 代码片段"></a>vscode 代码片段</h2></li>
<li>直接输入 ‘cl’ 就会直接生产 console.log(‘’)</li>
<li>直接输入 v3 会生成vue3 代码片段<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line"></span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    </span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;style lang="scss" scoped&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;/</span>style&gt;</span><br></pre></td></tr></table></figure>

</li>
</ol>
<!--more-->
<h2 id="CI-CD是什么？"><a href="#CI-CD是什么？" class="headerlink" title="CI/CD是什么？"></a>CI/CD是什么？</h2><ul>
<li>CI 持续集成（Continuous Integration）</li>
<li>CD 持续交付（Continuous Delivery）</li>
<li>CD 持续部署（Continuous Deployment）</li>
</ul>
<p>CI/CD 是一种通过在应用开发阶段引入自动化来频繁向客户交付应用的方法。CI/CD 的核心概念是持续集成、持续交付和持续部署。作为一个面向开发和运营团队的解决方案，CI/CD 主要针对在集成新代码时所引发的问题（亦称：“集成地狱”）。</p>
<p>具体而言，CI/CD 可让持续自动化和持续监控贯穿于应用的整个生命周期（从集成和测试阶段，到交付和部署）。这些关联的事务通常被统称为“CI/CD 管道”，由开发和运维团队以敏捷方式协同支持。</p>
<h3 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h3><p>DevOps是 Development和 Operations的组合，是一种思想、一组最佳实践、以及一种文化，用于促进应用开发、应用运维和质量保障（QA）部门之间的沟通、协作与整合。</p>
<h2 id="React"><a href="#React" class="headerlink" title="React"></a>React</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// in file /Users/chenxinxin/React/react/packages/react/src/ReactBaseClasses.js</span></span><br><span class="line">Component.prototype.setState</span><br></pre></td></tr></table></figure>

<h3 id="react的setState到底是同步还是异步？"><a href="#react的setState到底是同步还是异步？" class="headerlink" title="react的setState到底是同步还是异步？"></a>react的setState到底是同步还是异步？</h3><p> setState本身并不是异步，只是因为react的性能优化机制体现为异步。在react的生命周期函数或者作用域下为异步，在原生的环境下为同步。</p>
<p>Rreact控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等。</p>
<p>大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。</p>
<h2 id="Block-formatting-context-BFC"><a href="#Block-formatting-context-BFC" class="headerlink" title="Block formatting context(BFC)"></a>Block formatting context(BFC)</h2><p>(BFC MAN)[<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context]" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context]</a></p>
<h3 id="BFC能解决什么问题"><a href="#BFC能解决什么问题" class="headerlink" title="BFC能解决什么问题"></a>BFC能解决什么问题</h3><ol>
<li>边距重叠问题 (父及添加 <code>overflow:hideen</code>)</li>
<li>盒子塌陷问题 (父及添加 <code>overflow:hideen</code>)</li>
<li>float 没有高度，脱离文档流，清除浮动</li>
<li>浮动环绕文字问题</li>
</ol>
<h3 id="HMR-模块热替换"><a href="#HMR-模块热替换" class="headerlink" title="HMR(模块热替换)"></a>HMR(模块热替换)</h3><h2 id="我从-Vuejs-中学到了什么"><a href="#我从-Vuejs-中学到了什么" class="headerlink" title="我从 Vuejs 中学到了什么"></a>我从 Vuejs 中学到了什么</h2><ul>
<li><a href="https://mp.weixin.qq.com/s/M-DbtiLAzfmn1klsloMqMw" target="_blank" rel="noopener">参考链接-HcySunYang</a><h3 id="框架要做到良好的-Tree-Shaking"><a href="#框架要做到良好的-Tree-Shaking" class="headerlink" title="框架要做到良好的 Tree-Shaking"></a>框架要做到良好的 Tree-Shaking</h3>那什么是 Tree-Shaking 呢？在前端领域这个概念因 rollup 而普及，简单的说所谓 Tree-Shaking 指的就是消除哪些永远不会执行的代码，也就是排除 <code>dead-code</code>，现在无论是 rollup 还是 webpack 都支持 Tree-Shaking。</li>
</ul>
<p>想要实现 Tree-Shaking 必须满足一个条件，即模块必须是 ES Module，因为 Tree-Shaking 依赖 ESM 的静态结构。</p>
<p>vue 源码里用到以下等变量做 Tree-Shaking</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">__VUE_OPTIONS_API__</span><br><span class="line">__FEATURE_OPTIONS_API__</span><br><span class="line">__DEV__</span><br><span class="line"><span class="comment">/*#__PURE__*/</span></span><br></pre></td></tr></table></figure>

<h4 id="VUE-OPTIONS-API-作用"><a href="#VUE-OPTIONS-API-作用" class="headerlink" title="VUE_OPTIONS_API 作用"></a><strong>VUE_OPTIONS_API</strong> 作用</h4><ul>
<li>在 Vue2 中我们编写的组件叫做组件选项 API：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">data()&#123;&#125;,</span><br><span class="line"> </span><br><span class="line"><span class="comment">// data 选项</span></span><br><span class="line">computed:&#123;&#125;, </span><br><span class="line"><span class="comment">// computed 选项</span></span><br><span class="line"><span class="comment">//  其他选项...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<p>但是在 Vue3 中，更推荐使用 Composition API 来编写代码，例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">  setup() &#123;</span><br><span class="line">    <span class="keyword">const</span> count = ref(<span class="number">0</span>)</span><br><span class="line">      <span class="keyword">const</span> doubleCount = computed(<span class="function"><span class="params">()</span>=&gt;</span> count *<span class="number">2</span> )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>为了兼容 Vue2，在 Vue3 中仍然可以使用选项 API 的方式编写代码，但是对于明确知道自己不会使用选项 API 的用户来说，它们就可以选择使用 <strong>VUE_OPTIONS_API</strong> 开关来关闭该特性，这样在打包的时候 Vue 的这部分代码就不会包含在最终的资源中，从而减小资源体积。</li>
</ul>
<h3 id="使用-TS-的好处很多"><a href="#使用-TS-的好处很多" class="headerlink" title="使用 TS 的好处很多"></a>使用 TS 的好处很多</h3><p>如代码即文档、编辑器的自动提示、一定程度上能够避免低级 bug、让代码的可维护性更强等等。因此对 TS 类型支持的是否完善也成为评价一个框架的重要指标。</p>
<h2 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h2><h3 id="devtool"><a href="#devtool" class="headerlink" title="devtool"></a>devtool</h3><p>string false</p>
<ul>
<li>选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。</li>
</ul>
<p>eval-source-map  =&gt;&gt;  原始源代码<br>cheap-module-eval-source-map =&gt;&gt;  原始源代码（仅限行）</p>
<h2 id="Warning-callback-is-deprecated-Please-return-a-promise-instead"><a href="#Warning-callback-is-deprecated-Please-return-a-promise-instead" class="headerlink" title="Warning: callback is deprecated. Please return a promise instead."></a>Warning: <code>callback</code> is deprecated. Please return a promise instead.</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> handleCheckRePwd = <span class="function">(<span class="params">rules, value, callback</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> password = form.getFieldValue(<span class="string">"password"</span>);</span><br><span class="line">    <span class="keyword">if</span> (password &amp;&amp; password !== value) &#123;</span><br><span class="line">      callback(<span class="string">'两次输入的密码不一致'</span>)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      callback()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 现在改成了返回Promise，代码如下：</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> handleCheckRePwd = <span class="function">(<span class="params">rules, value, callback</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> password = form.getFieldValue(<span class="string">"password"</span>);</span><br><span class="line">    <span class="keyword">if</span> (password &amp;&amp; password !== value) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">"两次输入的密码不一致"</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h2 id="Observer（观察者模式）"><a href="#Observer（观察者模式）" class="headerlink" title="Observer（观察者模式）"></a>Observer（观察者模式）</h2><p>Observer（观察者模式）属于行为型模式。</p>
<p>意图：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。</p>
<p>拿项目的 npm 依赖举例子：npm 包与项目是一对多的关系（一个 npm 包被多个项目使用），当 npm 包发布新版本时，如果所有依赖于它的项目都能得到通知，并自动更新这个包的版本号，那么就解决了包版本更新的问题，这就是观察者模式要解决的基本问题</p>
<h3 id="举例子"><a href="#举例子" class="headerlink" title="举例子"></a>举例子</h3><h4 id="对象与视图双向绑定"><a href="#对象与视图双向绑定" class="headerlink" title="对象与视图双向绑定"></a>对象与视图双向绑定</h4><p>在 精读《设计模式 - Proxy 代理模式》 中我们也提到了双向绑定概念，只不过代理是实现双向绑定的一个具体方案，而观察者模式才是在描述双向绑定这个概念。</p>
<p>观察者模式在最初提出的时候，就举了数据与 UI 相互绑定的例子。即同一份数据可以同时渲染为表格与柱状图，那么当操作表格更新数据时，如何让柱状图的数据也刷新？从这个场景引出了对观察者模式的定义，即 “数据” 与 “UI” 是一对多的关系，我们需要一种设计模式实现当 “数据” 变化时，所有依赖于它的 “UI” 都得到通知并自动更新。</p>
<h4 id="拍卖"><a href="#拍卖" class="headerlink" title="拍卖"></a>拍卖</h4><p>拍卖由一个拍卖员与多为拍卖者组成。拍卖时，由 A 同学喊出的竞价（我出 100）就是观察者向目标发出的 setState 同时，此时拍卖员喊出（有人出价 100，还有更高的吗？）就是一个 notify 通知行为，拍卖员通知了现场竞价全员，刷新了他们对当前最高价的信息。</p>
<h4 id="使用网页端-“vscode”阅读Github的源码"><a href="#使用网页端-“vscode”阅读Github的源码" class="headerlink" title="使用网页端 “vscode”阅读Github的源码"></a>使用网页端 “vscode”阅读Github的源码</h4><p>1s使用“vscode”阅读Github的源码<br><a href="https://github.com/conwnet/github1s" target="_blank" rel="noopener">https://github.com/conwnet/github1s</a><br>在原有的github仓库地址中，对应的github后面加上1s，就可以使用，如<a href="https://github1s.com/microsoft/vscode。" target="_blank" rel="noopener">https://github1s.com/microsoft/vscode。</a></p>
<h2 id="source-tree-pull、push需要输入密码"><a href="#source-tree-pull、push需要输入密码" class="headerlink" title="source tree pull、push需要输入密码"></a>source tree pull、push需要输入密码</h2><p>(教程链接)[<a href="https://blog.csdn.net/lan_xuewei/article/details/79116793]" target="_blank" rel="noopener">https://blog.csdn.net/lan_xuewei/article/details/79116793]</a></p>
<h3 id="打开Mac终端，以下命令："><a href="#打开Mac终端，以下命令：" class="headerlink" title="打开Mac终端，以下命令："></a>打开Mac终端，以下命令：</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git config --global credential.helper osxkeychain</span><br></pre></td></tr></table></figure>

<h2 id="Vue3-ts"><a href="#Vue3-ts" class="headerlink" title="Vue3 +ts"></a>Vue3 +ts</h2><h3 id="在Vue3-TS项目的script中用this访问变量报错Property-‘xxx-变量-’-does-not-exist-on-type-‘-…-vue的组件内容-’"><a href="#在Vue3-TS项目的script中用this访问变量报错Property-‘xxx-变量-’-does-not-exist-on-type-‘-…-vue的组件内容-’" class="headerlink" title="在Vue3+TS项目的script中用this访问变量报错Property ‘xxx(变量)’ does not exist on type ‘ …(vue的组件内容)’"></a>在Vue3+TS项目的script中用this访问变量报错Property ‘xxx(变量)’ does not exist on type ‘ …(vue的组件内容)’</h3><p>解决方案：</p>
<ol>
<li><p>在script中import { defineComponent } from ‘vue’</p>
</li>
<li><p>将 export default { … } 的形式改成 export default defineComponent({ … })的形式即可</p>
</li>
</ol>
<h2 id="TCP协议"><a href="#TCP协议" class="headerlink" title="TCP协议"></a>TCP协议</h2><p>因为在 TCP 通道里传输的数据只能是二进制形式的，所以我们必须将数据结构或对象转换成二进制串传递给对方，这个过程就叫「序列化」。而相反，我们收到对方的二进制串后把它转换成数据结构或对象的过程叫「反序列化」。而序列化和反序列化的规则就叫「协议」。</p>
<h2 id="antd-自定义主题功能使用报错-bezierEasingMixin-Inline-JavaScript-is-not-enabled-Is-it-set-in-your-options"><a href="#antd-自定义主题功能使用报错-bezierEasingMixin-Inline-JavaScript-is-not-enabled-Is-it-set-in-your-options" class="headerlink" title="antd 自定义主题功能使用报错 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options"></a>antd 自定义主题功能使用报错 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options</h2><p>修改 less-loader 配置 ： 增加 less-loader 配置子项 options.options.javascriptEnabled = true</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue cli 2 中定制主题 修改build/utils.js文件</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// build/utils.js</span></span><br><span class="line">- less: generateLoaders(<span class="string">'less'</span>),</span><br><span class="line">+ less: generateLoaders(<span class="string">'less'</span>, &#123;</span><br><span class="line">+   modifyVars: &#123;</span><br><span class="line">+     <span class="string">'primary-color'</span>: <span class="string">'#1DA57A'</span>,</span><br><span class="line">+     <span class="string">'link-color'</span>: <span class="string">'#1DA57A'</span>,</span><br><span class="line">+     <span class="string">'border-radius-base'</span>: <span class="string">'2px'</span>,</span><br><span class="line">+   &#125;,</span><br><span class="line">+   javascriptEnabled: <span class="literal">true</span>,</span><br><span class="line">+ &#125;),</span><br><span class="line"></span><br><span class="line"><span class="comment">// cue cli3</span></span><br><span class="line"><span class="comment">// vue.config.js for less-loader@6.0.0</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  css: &#123;</span><br><span class="line">    loaderOptions: &#123;</span><br><span class="line">      less: &#123;</span><br><span class="line">        lessOptions: &#123;</span><br><span class="line">          modifyVars: &#123;</span><br><span class="line">            <span class="string">'primary-color'</span>: <span class="string">'#1DA57A'</span>,</span><br><span class="line">            <span class="string">'link-color'</span>: <span class="string">'#1DA57A'</span>,</span><br><span class="line">            <span class="string">'border-radius-base'</span>: <span class="string">'2px'</span>,</span><br><span class="line">          &#125;,</span><br><span class="line">          javascriptEnabled: <span class="literal">true</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="css控制滚动条的样式，大小，颜色"><a href="#css控制滚动条的样式，大小，颜色" class="headerlink" title="css控制滚动条的样式，大小，颜色"></a>css控制滚动条的样式，大小，颜色</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">.my-scroll::-webkit-scrollbar &#123; /滚动条整体样式/</span><br><span class="line">width: 5px; /高宽分别对应横竖滚动条的尺寸/</span><br><span class="line"><span class="selector-tag">height</span>: 1<span class="selector-tag">px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">.my-scroll::-webkit-scrollbar-thumb &#123; /滚动条里面小方块/</span><br><span class="line"><span class="selector-tag">border-radius</span>: 10<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-tag">-webkit-box-shadow</span>: <span class="selector-tag">inset</span> 0 0 5<span class="selector-tag">px</span> <span class="selector-tag">rgba</span>(0, 0, 0, 0<span class="selector-class">.2</span>);</span><br><span class="line">background: #ccc;/滚动条颜色/</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.my-scroll::-webkit-scrollbar-track &#123; /滚动条里面轨道/</span><br><span class="line"><span class="selector-tag">-webkit-box-shadow</span>: <span class="selector-tag">inset</span> 0 0 5<span class="selector-tag">px</span> <span class="selector-tag">rgba</span>(0, 0, 0, 0<span class="selector-class">.2</span>);</span><br><span class="line"><span class="selector-tag">border-radius</span>: 10<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-tag">background</span>: <span class="selector-id">#EDEDED</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Vue项目全局引用sass变量文件报错的解决办法"><a href="#Vue项目全局引用sass变量文件报错的解决办法" class="headerlink" title="Vue项目全局引用sass变量文件报错的解决办法"></a>Vue项目全局引用sass变量文件报错的解决办法</h2><p>通常情况咱们的sass变量会以单独的文件存放。我们在使用这些变量的时候如果在每个组件中import引用的显得特别麻烦，而且感觉很蠢QAQ，但是全局引用的时候又会报错。这时就需要用到sass-resources-loader插件并进行相应的配置就可以解决问题</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  css: &#123;</span><br><span class="line">    loaderOptions: &#123;</span><br><span class="line">      sass: &#123;</span><br><span class="line">        additionalData: <span class="string">`@import "path/to/your-theme.scss";`</span></span><br><span class="line">        <span class="comment">// sass 版本 9 中使用 additionalData 版本 8 中使用 prependData</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="vscode-快速跳转"><a href="#vscode-快速跳转" class="headerlink" title="vscode 快速跳转"></a>vscode 快速跳转</h2><p>在项目跟目录添加 jsconfig.json 文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"compilerOptions"</span>: &#123;</span><br><span class="line">      <span class="string">"baseUrl"</span>: <span class="string">"./"</span>,</span><br><span class="line">      <span class="string">"module"</span>: <span class="string">"commonjs"</span>,</span><br><span class="line">      <span class="string">"paths"</span>: &#123;</span><br><span class="line">          <span class="string">"@/*"</span>: [<span class="string">"src/*"</span>],</span><br><span class="line">          <span class="string">"Setting/*"</span>: [<span class="string">"src/whale_setting/*"</span>],</span><br><span class="line">          <span class="string">"Home/*"</span>: [<span class="string">"src/whale_homePage/*"</span>],</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">"target"</span>: <span class="string">"ES6"</span>,</span><br><span class="line">      <span class="string">"allowSyntheticDefaultImports"</span>: <span class="literal">true</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"include"</span>: [<span class="string">"src/**/*"</span>],</span><br><span class="line">  <span class="string">"exclude"</span>: [<span class="string">"node_modules"</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="Visual-studio-Code-跳转定义返回快捷键"><a href="#Visual-studio-Code-跳转定义返回快捷键" class="headerlink" title="Visual studio Code 跳转定义返回快捷键"></a>Visual studio Code 跳转定义返回快捷键</h3><h4 id="Windows"><a href="#Windows" class="headerlink" title="Windows"></a>Windows</h4><p>Alt + ← Navigate back<br>Alt + → Navigate forward</p>
<h4 id="Mac"><a href="#Mac" class="headerlink" title="Mac"></a>Mac</h4><p>Ctrl + - Navigate back<br>Ctrl + Shift + - Navigate forward</p>
<h3 id="vscode-路径提示"><a href="#vscode-路径提示" class="headerlink" title="vscode @ 路径提示"></a>vscode @ 路径提示</h3><ol>
<li>在vscode 扩展工具里安装Path Intellisense</li>
<li>选择edit in setting.json这个选项，进入下图，然后在右侧添加配置：“path-intellisense.mappings”: {<br>“@”: “${workspaceRoot}/src”<br>}</li>
</ol>
<h2 id="vue-2-x-使用-ts"><a href="#vue-2-x-使用-ts" class="headerlink" title="vue 2.x 使用 ts"></a>vue 2.x 使用 ts</h2><p>导出枚举时不能使用 const?</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span>  enum ListDemo &#123;</span><br><span class="line">  UP=<span class="number">1</span>,</span><br><span class="line">  DOWN</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span>  <span class="keyword">const</span> enum ListDemo &#123; <span class="comment">// 导出会空变成 undefined</span></span><br><span class="line">  UP=<span class="number">1</span>,</span><br><span class="line">  DOWN</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="特殊运算符"><a href="#特殊运算符" class="headerlink" title="特殊运算符 ~~"></a>特殊运算符 ~~</h2><ul>
<li>简单一点就是将一些变量转化为Number（数字）类型的；</li>
</ul>
<ol>
<li>数字类型的字符串可以转化为纯数字</li>
<li>字符串中带了其他字母，符号，或者其他除数字外的东西，一律输出 Number类型的0</li>
<li>任何boolen类型的，如果为TRUE则输出1，FALSE输出0；</li>
<li>特殊类型，转化为Boolean是true的输出1，转化为boolean是false的输出0；</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> a=<span class="string">'123'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(~~a); <span class="comment">//输出123</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a=<span class="string">'asd'</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(~~a); <span class="comment">//输出0</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a=<span class="number">1</span>==<span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(~~a);<span class="comment">//输出1</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a=<span class="literal">undefined</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(~~a);<span class="comment">//输出0</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b=！<span class="literal">undefined</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(~~b);<span class="comment">//输出1</span></span><br></pre></td></tr></table></figure>

<h2 id="这里还有一个需要注意的小知识点：不需要-px-转-rem-的情况，可以使用大写的-PX-作为单位。"><a href="#这里还有一个需要注意的小知识点：不需要-px-转-rem-的情况，可以使用大写的-PX-作为单位。" class="headerlink" title="这里还有一个需要注意的小知识点：不需要 px 转 rem 的情况，可以使用大写的 PX 作为单位。"></a>这里还有一个需要注意的小知识点：不需要 px 转 rem 的情况，可以使用大写的 PX 作为单位。</h2><p>编译时不会将其转化为 rem 单位，也可以通过 selectorBlackList 属性声明的 .norem 前缀的 class 类名，同样也不会被转化。</p>
<h2 id="dependencies-与-devDependencies的区别"><a href="#dependencies-与-devDependencies的区别" class="headerlink" title="dependencies 与 devDependencies的区别"></a>dependencies 与 devDependencies的区别</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yarn add lib-flexible -S  <span class="comment">// =&gt;&gt;&gt; dependencies</span></span><br><span class="line">yarn add postcss-pxtorem -D <span class="comment">// =&gt;&gt;&gt; devDependencies</span></span><br></pre></td></tr></table></figure>

<h2 id="typescript"><a href="#typescript" class="headerlink" title="typescript"></a>typescript</h2><p>只是告诉大家为什么要用 Typescript，如果没有逻辑复用，没有面向抽象，Typescript 是没有任何使用价值的，只能用来恶心你的队友。</p>
<h2 id="对象解构"><a href="#对象解构" class="headerlink" title="对象解构"></a>对象解构</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123; <span class="attr">foo</span>: baz &#125; = &#123; <span class="attr">foo</span>: <span class="string">'aaa'</span>, <span class="attr">bar</span>: <span class="string">'bbb'</span> &#125;;</span><br><span class="line">baz <span class="comment">// "aaa"</span></span><br><span class="line">foo <span class="comment">// error: foo is not defined</span></span><br></pre></td></tr></table></figure>

<h2 id="vue-debug-模式"><a href="#vue-debug-模式" class="headerlink" title="vue debug 模式"></a>vue debug 模式</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> isDebug_mode = process.env.NODE_ENV !== <span class="string">'production'</span>;</span><br><span class="line"></span><br><span class="line">Vue.config.debug = isDebug_mode;</span><br><span class="line"></span><br><span class="line">Vue.config.devtools = isDebug_mode;</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = isDebug_mode;</span><br></pre></td></tr></table></figure>

<h2 id="提升效率的案例"><a href="#提升效率的案例" class="headerlink" title="提升效率的案例"></a>提升效率的案例</h2><p>认识的一个同事主要职责是负责工单域业务开发，我们能够想象到工单域没有那么的复杂，但是要面对接入N多个工单，这个工作量就很大，而且工单涉及到很多个性化的处理，每个工单状态和状态流转逻辑不一样，如何做到高效就是一个很有意思的话题，是否可以做到以低成本来支撑新业务的接入。<br>他的解法是用可视化配置的方式来实现不需要代码开发就可以完成一个新的工单的接入，把工单域的效率发挥的机制，价值也就显而易见的。<br>这是个提升效率的案例，我们也可以选择硬编码的方式来实现个性化的诉求，但不是一个优秀的解决方案，也没有留下技术资产。</p>
<p>在业务支撑中，忙的同时，也一定要给自己预留思考的时间，而且需要把自己的思考和总结去分享出来，再加工，刷新。<br>另外有些建议是：</p>
<ol>
<li>找个适合的Mentor，寻求更多的人帮助，这个是在阿里特殊的优势，特有的资源，要用起来。</li>
<li>目标的实现路径往往还挺多的，找些合适的沟通，也给你点输入，来优化实现路径。</li>
<li>状态很重要，阶段性要奖励下自己，状态好了，做很多事情就很顺。</li>
</ol>
<h2 id="ES11-Promise-allSettled-和-Promise-all-的差别"><a href="#ES11-Promise-allSettled-和-Promise-all-的差别" class="headerlink" title="ES11 Promise.allSettled([]) 和 Promise.all([]) 的差别"></a>ES11 Promise.allSettled([]) 和 Promise.all([]) 的差别</h2><ol>
<li>allSettled 返回的是成功的数组，包括每个promise 的执行状态和结果的对象 [{status: “fulfilled”, value: “p1”}1: {status: “fulfilled”, value: “p2”}]</li>
<li>all 只要有一个promise为reject 则返回的都是reject，如果成功的话是，promise 执行的结果 [‘p1’,p2]<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res,rej</span>)=&gt;</span>&#123;setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;res(<span class="string">'p1'</span>)&#125;,<span class="number">2000</span>)&#125;)</span><br><span class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res,rej</span>)=&gt;</span>&#123;setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;res(<span class="string">'p2'</span>)&#125;,<span class="number">1000</span>)&#125;)</span><br><span class="line"><span class="built_in">Promise</span>.allSettled([p1,p2])</span><br><span class="line"><span class="built_in">Promise</span> &#123;&lt;fulfilled&gt;: <span class="built_in">Array</span>(<span class="number">2</span>)&#125;__proto__: <span class="built_in">Promise</span>[[PromiseState]]: <span class="string">"fulfilled"</span>[[PromiseResult]]: <span class="built_in">Array</span>(<span class="number">2</span>)<span class="number">0</span>: &#123;<span class="attr">status</span>: <span class="string">"fulfilled"</span>, <span class="attr">value</span>: <span class="string">"p1"</span>&#125;<span class="number">1</span>: &#123;<span class="attr">status</span>: <span class="string">"fulfilled"</span>, <span class="attr">value</span>: <span class="string">"p2"</span>&#125;length: <span class="number">2</span>__proto__: <span class="built_in">Array</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.all([p,p2])</span><br><span class="line"><span class="built_in">Promise</span> &#123;&lt;fulfilled&gt;: <span class="built_in">Array</span>(<span class="number">2</span>)&#125;</span><br><span class="line">__proto__: <span class="built_in">Promise</span></span><br><span class="line">[[PromiseState]]: <span class="string">"fulfilled"</span></span><br><span class="line">[[PromiseResult]]: <span class="built_in">Array</span>(<span class="number">2</span>)</span><br><span class="line"><span class="number">0</span>: <span class="string">"p1"</span></span><br><span class="line"><span class="number">1</span>: <span class="string">"p222"</span></span><br><span class="line">length: <span class="number">2</span></span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="异步（Promise）环境下错误处理方式"><a href="#异步（Promise）环境下错误处理方式" class="headerlink" title="异步（Promise）环境下错误处理方式"></a>异步（Promise）环境下错误处理方式</h2><p>在 Promise 内部使用 reject 方法来处理错误，而不要直接调用 throw Error，这样你不会捕捉到任何的报错信息。</p>
<p>reject 如果使用 Error 对象，会导致捕获不到错误的情况，在我的博客中有讨论过这种情况：Callback Promise Generator Async-Await 和异常处理的演进，我们看以下代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">thirdFunction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      reject(<span class="string">'我可以被捕获'</span>)</span><br><span class="line">      <span class="comment">// throw Error('永远无法被捕获')</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve(<span class="literal">true</span>).then(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> thirdFunction()</span><br><span class="line">&#125;).catch(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'捕获异常'</span>, error) <span class="comment">// 捕获异常 我可以被捕获</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="AOP-模式"><a href="#AOP-模式" class="headerlink" title="AOP 模式"></a>AOP 模式</h2><p><a href="https://zhuanlan.zhihu.com/p/108666685" target="_blank" rel="noopener">参考链接</a></p>
<h3 id="aop-是什么"><a href="#aop-是什么" class="headerlink" title="aop 是什么"></a>aop 是什么</h3><p>aop又叫面向切面编程，主要作用是把一些和跟核心业务逻辑无关的功能包括日志统计、打点上报、异常处理等。把这些功能抽离出来后，再通过==动态织入==的方式掺入业务逻辑模块中。aop在js中是个被严重忽略的技术点。</p>
<h3 id="aop有什么优势"><a href="#aop有什么优势" class="headerlink" title="aop有什么优势"></a>aop有什么优势</h3><p>aop的好处首先是可以保持我们业务逻辑模块的纯净和高内聚性，其次，可以很方便的复用日志统计等功能模块</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 改造before函数</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.before = <span class="function"><span class="keyword">function</span> (<span class="params">beforeFn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> self = <span class="keyword">this</span> <span class="comment">// 保存对原函数的引用</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="comment">// 返回包含原函数和参数函数的‘代理函数’</span></span><br><span class="line">    <span class="comment">// 先执行 beforeFn</span></span><br><span class="line">    <span class="keyword">let</span> ret = beforeFn.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line">    <span class="comment">// 当beforeFn返回false不再往下走了</span></span><br><span class="line">    <span class="keyword">if</span>(!ret) &#123;</span><br><span class="line">        <span class="keyword">return</span> ret</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 再执行原函数</span></span><br><span class="line">    <span class="keyword">return</span> self.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 改造after函数</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.after = <span class="function"><span class="keyword">function</span> (<span class="params">afterFn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> self = <span class="keyword">this</span> <span class="comment">// 保存对原函数的引用</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 先执行原函数</span></span><br><span class="line">    <span class="keyword">let</span> ret = self.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line">    <span class="keyword">if</span>(ret)&#123;</span><br><span class="line">        <span class="keyword">return</span> ret</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 再执行 afterFn</span></span><br><span class="line">    <span class="keyword">return</span> afterFn.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="js调用轮询接口"><a href="#js调用轮询接口" class="headerlink" title="js调用轮询接口"></a>js调用轮询接口</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// polling-utils.js</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@descripting </span>轮询功能</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;String&#125;</span> </span>type 请求类型</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;String&#125;</span> </span>url 地址 </span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>data 请求数据 </span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;Number&#125;</span> </span>delay 轮询间隔时间</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">polling</span>(<span class="params">type, url, data, delay = <span class="number">1000</span></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span>&#123;</span><br><span class="line">            ajax[type](url, data).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">if</span> (res.data === <span class="string">'polling'</span>) &#123;  <span class="comment">// 这个继续进行轮询的条件，需要根据自己的需要修改</span></span><br><span class="line">                    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">                        resolve(polling(type, url, data, delay));</span><br><span class="line">                    &#125;, delay)</span><br><span class="line">                &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                   resolve(res);</span><br><span class="line">               &#125;</span><br><span class="line">           &#125;)</span><br><span class="line">       &#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h2 id="随手鸡汤"><a href="#随手鸡汤" class="headerlink" title="随手鸡汤"></a>随手鸡汤</h2><p>如果你待在原地过着安定平稳的生活，你的生活将是无趣，boring、</p>
<p>如果你可以避免 自我 和 盲点，。。。。。</p>
<p>performance ：性能</p>
<p>memory: 内存</p>
<h2 id="判断基本类型"><a href="#判断基本类型" class="headerlink" title="判断基本类型"></a>判断基本类型</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">null</span>); <span class="comment">// "[object Null]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">undefined</span>); <span class="comment">// "[object Undefined]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(“abc”);<span class="comment">// "[object String]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="number">123</span>);<span class="comment">// "[object Number]"</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">true</span>);<span class="comment">// "[object Boolean]"</span></span><br></pre></td></tr></table></figure>

<h3 id="git-问题"><a href="#git-问题" class="headerlink" title="git 问题"></a>git 问题</h3><p><code>error1： Updates were rejected because the tag already exists in the remote.</code></p>
<p>sourceTree , 把推送所有标签的打钩去掉</p>
<p>var x = 1, y = z = 0;<br>var add = (n) =&gt; {<br>    return ++n+3<br>}<br>function add(n) {<br>    return n++<br>}<br>y = add(x)<br>z=add(x)</p>
<h2 id="Vue-webpack-bundle-analyzer打包体积优化，详细分布查看插件"><a href="#Vue-webpack-bundle-analyzer打包体积优化，详细分布查看插件" class="headerlink" title="Vue webpack-bundle-analyzer打包体积优化，详细分布查看插件"></a>Vue webpack-bundle-analyzer打包体积优化，详细分布查看插件</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.npm 安装</span></span><br><span class="line"></span><br><span class="line">npm install --save-dev webpack-bundle-analyzer</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> BundleAnalyzerPlugin = <span class="built_in">require</span>(<span class="string">'webpack-bundle-analyzer'</span>).BundleAnalyzerPlugin;</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><span class="comment">//  2.webpack.prod.conf.js里配置</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line"> </span><br><span class="line">  plugins: [</span><br><span class="line"> </span><br><span class="line">    <span class="keyword">new</span> BundleAnalyzerPlugin()</span><br><span class="line"> </span><br><span class="line">  ]</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3.配置package.json添加下面一句话 然后使用 npm run build  可以自动打开网页查看</span></span><br><span class="line"></span><br><span class="line"><span class="string">"analyz"</span>:<span class="string">"NODE_ENV=production npm_config_report=true npm run build"</span></span><br></pre></td></tr></table></figure>

<h2 id="ssh登录-The-authenticity-of-host-192-168-0-xxx-can’t-be-established-的问题"><a href="#ssh登录-The-authenticity-of-host-192-168-0-xxx-can’t-be-established-的问题" class="headerlink" title="ssh登录　The authenticity of host 192.168.0.xxx can’t be established.　的问题"></a>ssh登录　The authenticity of host 192.168.0.xxx can’t be established.　的问题</h2><p>用ssh登录一个机器（换过ip地址），提示输入yes后，屏幕不断出现y，只有按ctrl + c结束</p>
<p>错误是：The authenticity of host 192.168.0.xxx can’t be established.</p>
<p>以前和同事碰到过这个问题，解决了，没有记录，这次又碰到了不知道怎么处理，还好有QQ聊天记录，查找到一下，找到解决方案：</p>
<p>执行ssh  -o StrictHostKeyChecking=no  192.168.0.xxx　就OK</p>
<p>网址是：</p>
<p><a href="http://blog.ossxp.com/2010/04/1026/" target="_blank" rel="noopener">http://blog.ossxp.com/2010/04/1026/</a></p>
<p>记一下，防止又忘记了，又快到3点了，无数个不眠之夜啊。</p>
<p>2011/10/11</p>
<p>某天机器又改IP了，ssh后，报：</p>
<p>mmt@FS01:~$ ssh  -o StrictHostKeyChecking=no  192.168.0.130<br>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@<br>@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @<br>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@<br>IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!<br>Someone could be eavesdropping on you right now (man-in-the-middle attack)!<br>It is also possible that the RSA host key has just been changed.<br>The fingerprint for the RSA key sent by the remote host is<br>fe:d6:f8:59:03:a5:de:e8:29:ef:3b:26:6e:3d:1d:4b.<br>Please contact your system administrator.<br>Add correct host key in /home/mmt/.ssh/known_hosts to get rid of this message.<br>Offending key in /home/mmt/.ssh/known_hosts:38<br>Password authentication is disabled to avoid man-in-the-middle attacks.<br>Keyboard-interactive authentication is disabled to avoid man-in-the-middle attacks.<br>Permission denied (publickey,password).</p>
<p> 注意这句</p>
<p>Add correct host key in /home/mmt/.ssh/known_hosts to get rid of this message.</p>
<p>执行：</p>
<p>mv  /home/mmt/.ssh/known_hosts known_hosts.bak</p>
<p>再连：</p>
<p>ssh  -o StrictHostKeyChecking=no  192.168.0.130</p>
<p>OK了!</p>
<h2 id="你认为程序员从幼稚到成熟的过程是什么？"><a href="#你认为程序员从幼稚到成熟的过程是什么？" class="headerlink" title="你认为程序员从幼稚到成熟的过程是什么？"></a>你认为程序员从幼稚到成熟的过程是什么？</h2><p>逐渐的认识到自己是真的菜，菜到你想转行，然后还不甘心的继续学习。–  HcySunYang</p>
<h2 id="element-ui的popover组件位置偏移"><a href="#element-ui的popover组件位置偏移" class="headerlink" title="element-ui的popover组件位置偏移"></a>element-ui的popover组件位置偏移</h2><h3 id="1、统一给popver固定的高度"><a href="#1、统一给popver固定的高度" class="headerlink" title="1、统一给popver固定的高度"></a>1、统一给popver固定的高度</h3><h3 id="2、boundariesElement真的很重要，记住一定要设置为viewport"><a href="#2、boundariesElement真的很重要，记住一定要设置为viewport" class="headerlink" title="2、boundariesElement真的很重要，记住一定要设置为viewport"></a>2、boundariesElement真的很重要，记住一定要设置为viewport</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-popover</span></span></span><br><span class="line"><span class="tag">  <span class="attr">ref</span>=<span class="string">"dcPopover"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">placement</span>=<span class="string">"left"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">width</span>=<span class="string">"797"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">trigger</span>=<span class="string">"hover"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:popper-options</span>=<span class="string">"&#123; boundariesElement: 'viewport', removeOnDestroy: true &#125;"</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">show</span>=<span class="string">"handleShow(scope)"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:open-delay</span>=<span class="string">"300"</span></span></span><br><span class="line"><span class="tag">&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>boundariesElement真的很重要，记住一定要设置为viewport,默认的是body!</p>
<p>记住，获取到数据之后要this.$refs.dcPopover.updatePopper()一下（用来重新计算位置的）</p>
</li>
</ul>
<h3 id="el-table-设置-fixed-’right’"><a href="#el-table-设置-fixed-’right’" class="headerlink" title="el-table 设置 fixed=’right’"></a>el-table 设置 fixed=’right’</h3><p>会导致hover 阴影出现位置错乱</p>
<h2 id="运行vue报错There-are-multiple-modules-with-names-that-only-differ-in-casing"><a href="#运行vue报错There-are-multiple-modules-with-names-that-only-differ-in-casing" class="headerlink" title="运行vue报错There are multiple modules with names that only differ in casing."></a>运行vue报错There are multiple modules with names that only differ in casing.</h2><p>There are multiple modules with names that only differ in casing.<br>This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.<br>Use equal casing. Compare these module identifiers:</p>
<p>如果遇到以上报错，请仔细检查/router/index.js中报错的vue组件文件路径的大小写是否正确<br>import Goods from ‘@/components/onekeyfollow/Goods’</p>
<h2 id="数字数组转化为字符串数组或Number-数组"><a href="#数字数组转化为字符串数组或Number-数组" class="headerlink" title="数字数组转化为字符串数组或Number 数组"></a>数字数组转化为字符串数组或Number 数组</h2><h3 id="数字数组转化为字符串数组"><a href="#数字数组转化为字符串数组" class="headerlink" title="数字数组转化为字符串数组"></a>数字数组转化为字符串数组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>];</span><br><span class="line">arr.map(<span class="built_in">String</span>);  <span class="comment">//结果： ['1', '2', '3', '4', '5', '6', '7', '8', '9']</span></span><br></pre></td></tr></table></figure>

<h3 id="字符串数组转化为数字数组"><a href="#字符串数组转化为数字数组" class="headerlink" title="字符串数组转化为数字数组"></a>字符串数组转化为数字数组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>, <span class="string">'4'</span>, <span class="string">'5'</span>, <span class="string">'6'</span>, <span class="string">'7'</span>, <span class="string">'8'</span>, <span class="string">'9'</span>]</span><br><span class="line">a.map(<span class="built_in">Number</span>);  <span class="comment">//结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span><br></pre></td></tr></table></figure>

<h2 id="文件预览或下载中，axios设置responseType-blob时对于后台报错信息的捕获兼容"><a href="#文件预览或下载中，axios设置responseType-blob时对于后台报错信息的捕获兼容" class="headerlink" title="文件预览或下载中，axios设置responseType:blob时对于后台报错信息的捕获兼容"></a>文件预览或下载中，axios设置responseType:blob时对于后台报错信息的捕获兼容</h2><p> 当后台解析错误的时候，返回的就是正常的错误对象，包含错误码和错误信息，如果不做处理，那么错误状态和成功状态都是blob类型，无法捕获</p>
<p>因为返回分来 response 为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">size: <span class="number">86</span>,</span><br><span class="line">type: <span class="string">"application/json"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="样式穿透"><a href="#样式穿透" class="headerlink" title="样式穿透"></a>样式穿透</h2><p>在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。</p>
<p>我们可以使用 &gt;&gt;&gt; 或 /deep/ 解决这一问题：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span> <span class="selector-tag">scoped</span>&gt;</span><br><span class="line"><span class="selector-class">.conatain</span> &gt;&gt;&gt; <span class="selector-class">.el-checkbox</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">26px</span>;</span><br><span class="line"></span><br><span class="line">  .el-checkbox__label &#123;</span><br><span class="line">    <span class="selector-tag">font-size</span>: 16<span class="selector-tag">px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;<span class="selector-tag">style</span> <span class="selector-tag">scoped</span>&gt;</span><br><span class="line">/deep/ .el-checkbox &#123;</span><br><span class="line">  <span class="selector-tag">display</span>: <span class="selector-tag">block</span>;</span><br><span class="line">  <span class="selector-tag">font-size</span>: 26<span class="selector-tag">px</span>;</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.el-checkbox__label</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>有些像 Sass 之类的预处理器无法正确解析 &gt;&gt;&gt;。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 &gt;&gt;&gt; 的别名，同样可以正常工作。<br>[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.</inner-selector></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.a</span> <span class="selector-pseudo">::v-deep</span> <span class="selector-class">.b</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(&lt;inner-selector&gt;) instead. */</span></span><br><span class="line"><span class="selector-class">.a</span> <span class="selector-pseudo">:deep</span> <span class="selector-class">.b</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="百度地图"><a href="#百度地图" class="headerlink" title="百度地图"></a>百度地图</h2><p>在安卓微信里获取经纬度不正确解决办法？<br>要用 域名 https ，因为受安全协议影响</p>
<h2 id="es6提供了一个新的方法用于判断某个变量是否是整数"><a href="#es6提供了一个新的方法用于判断某个变量是否是整数" class="headerlink" title="es6提供了一个新的方法用于判断某个变量是否是整数"></a>es6提供了一个新的方法用于判断某个变量是否是整数</h2><p>就是Number.isInteger()方法，用它就可以判断是否是整数了，注意ie是不支持的</p>
<h2 id="函数防抖和节流的概念和真实项目中的应用场景"><a href="#函数防抖和节流的概念和真实项目中的应用场景" class="headerlink" title="函数防抖和节流的概念和真实项目中的应用场景"></a>函数防抖和节流的概念和真实项目中的应用场景</h2><h3 id="函数防抖-debounce-："><a href="#函数防抖-debounce-：" class="headerlink" title="函数防抖(debounce)："></a>函数防抖(debounce)：</h3><p>在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。</p>
<p>立即执行版本</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span> (<span class="params">callback, wait</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timeout</span><br><span class="line">  <span class="keyword">let</span> flag</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timeout) clearTimeout(timeout)</span><br><span class="line"></span><br><span class="line">    flag = !timeout</span><br><span class="line"></span><br><span class="line">    timeout = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      timeout = <span class="literal">null</span></span><br><span class="line">    &#125;, wait)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (flag) callback.apply(callback, <span class="built_in">arguments</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="举个例子–页面滚动"><a href="#举个例子–页面滚动" class="headerlink" title="举个例子–页面滚动"></a>举个例子–页面滚动</h4><p>基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：<br>• 如果在200ms内没有再次触发滚动事件，那么就执行函数<br>• 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时<br>效果：如果短时间内大量触发同一事件，只会执行一次函数。<br>实现：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：</p>
<p>延时版</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">* fn [function] 需要防抖的函数</span></span><br><span class="line"><span class="comment">* delay [number] 毫秒，防抖期限值</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">fn,delay</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> timer = <span class="literal">null</span> <span class="comment">//借助闭包</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(timer)&#123;</span><br><span class="line">            clearTimeout(timer) <span class="comment">//进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时</span></span><br><span class="line">            timer = setTimeOut(fn,delay) </span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            timer = setTimeOut(fn,delay) <span class="comment">// 进入该分支说明当前并没有在计时，那么就开始一个计时</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce1</span>(<span class="params">fn, delayMilliseconds</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer = <span class="literal">null</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) clearTimeout(timer)</span><br><span class="line">    timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      fn.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>)</span><br><span class="line">    &#125;, delayMilliseconds)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 然后是旧代码</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showTop</span>  (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> scrollTop = <span class="built_in">document</span>.body.scrollTop || <span class="built_in">document</span>.documentElement.scrollTop;</span><br><span class="line">　　<span class="built_in">console</span>.log(<span class="string">'滚动条位置：'</span> + scrollTop);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.onscroll = debounce(showTop,<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。</li>
</ul>
<h3 id="实际的应用"><a href="#实际的应用" class="headerlink" title="实际的应用"></a>实际的应用</h3><p>用户在输入搜索的时候不是每次输入都执行keyup的事件 而是用户输入1s后再执行请求的事件</p>
<p>1s之内用户再次输入的时候会从新计算时间</p>
<h3 id="函数节流-throttle-："><a href="#函数节流-throttle-：" class="headerlink" title="函数节流(throttle)："></a>函数节流(throttle)：</h3><p>规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。<br>立即执行版本</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">throttle</span> (<span class="params">callback, wait</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timeout</span><br><span class="line">  <span class="keyword">let</span> flag = <span class="literal">false</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!flag) callback.apply(callback, <span class="built_in">arguments</span>)</span><br><span class="line"></span><br><span class="line">    flag = <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (timeout) <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line">    timeout = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      flag = <span class="literal">false</span></span><br><span class="line">      timeout = <span class="literal">null</span></span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>延时版</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">throttle</span> (<span class="params">callback, wait</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timeout</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timeout) <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line">    timeout = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      callback.apply(callback, <span class="built_in">arguments</span>)</span><br><span class="line">      timeout = <span class="literal">null</span></span><br><span class="line">    &#125;, wait)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="实际的应用-1"><a href="#实际的应用-1" class="headerlink" title="实际的应用"></a>实际的应用</h3><p>滚动加载更多 在监听滚动条的位置的时候不是用户每次滚动都要去监听滚动条的位置的 而是例如2秒内不管你滚动多少次 我就监听一次滚动条的位置</p>
<h3 id="其他应用场景举例"><a href="#其他应用场景举例" class="headerlink" title="其他应用场景举例"></a>其他应用场景举例</h3><p>讲完了这两个技巧，下面介绍一下平时开发中常遇到的场景：</p>
<ol>
<li>搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。</li>
<li>页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）</li>
</ol>
<p><a href="https://www.yuque.com/kylethanas/share/adt1bq" target="_blank" rel="noopener">参考链接</a></p>
<h2 id="图片懒加载"><a href="#图片懒加载" class="headerlink" title="图片懒加载"></a>图片懒加载</h2><p>利用intersection observer 实现<br>class：用于在JavaScript中关联元素<br>src属性：指向了一张占位图片，图片在页面的第一次加载会显现<br>data-src和data-srcset属性：这是占位属性，里面放的是目标图片的ur</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">"lazy"</span> <span class="attr">src</span>=<span class="string">"placeholder-image.jpg"</span> <span class="attr">data-src</span>=<span class="string">"image-to-lazy-load-1x.jpg"</span> <span class="attr">data-srcset</span>=<span class="string">"image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x"</span> <span class="attr">alt</span>=<span class="string">"I'm an image!"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.addEventListener(<span class="string">"DOMContentLoaded"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> lazyImages = [].slice.call(<span class="built_in">document</span>.querySelectorAll(<span class="string">"img.lazy"</span>));</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">if</span> (<span class="string">"IntersectionObserver"</span> <span class="keyword">in</span> <span class="built_in">window</span>) &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> lazyImageObserver = <span class="keyword">new</span> IntersectionObserver(<span class="function"><span class="keyword">function</span>(<span class="params">entries, observer</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      entries.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">entry</span>) </span>&#123;</span></span><br><span class="line">        if (entry.isIntersecting) &#123;</span><br><span class="line"><span class="javascript">          <span class="keyword">let</span> lazyImage = entry.target;</span></span><br><span class="line">          lazyImage.src = lazyImage.dataset.src;</span><br><span class="line">          lazyImage.srcset = lazyImage.dataset.srcset;</span><br><span class="line"><span class="javascript">          lazyImage.classList.remove(<span class="string">"lazy"</span>);</span></span><br><span class="line">          lazyImageObserver.unobserve(lazyImage);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line"><span class="javascript">    lazyImages.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">lazyImage</span>) </span>&#123;</span></span><br><span class="line">      lazyImageObserver.observe(lazyImage);</span><br><span class="line">    &#125;);</span><br><span class="line"><span class="javascript">  &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// Possibly fall back to a more compatible method here</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>当DOMContentLoaded触发后，js会查询class为lazy的img元素。然后我们检测浏览器支不支持intersection observer，如果可以用，先创建一个observer，然后传入回调函数，回调函数将会在元素可见性变化时被调用。</p>
<h3 id="或者用获取图片的可视高度-getBoundingClientRect"><a href="#或者用获取图片的可视高度-getBoundingClientRect" class="headerlink" title="或者用获取图片的可视高度  getBoundingClientRect"></a>或者用获取图片的可视高度  getBoundingClientRect</h3><p>作者：Naeco<br>链接：<a href="https://www.jianshu.com/p/e86c61468285" target="_blank" rel="noopener">https://www.jianshu.com/p/e86c61468285</a><br>来源：简书<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
<h2 id="vue-性能优化"><a href="#vue-性能优化" class="headerlink" title="vue 性能优化"></a>vue 性能优化</h2><h3 id="vue-用的算法是找-最长递增子序列，而非-最长递增连续子序列，因为连续子序列不一定是最优解"><a href="#vue-用的算法是找-最长递增子序列，而非-最长递增连续子序列，因为连续子序列不一定是最优解" class="headerlink" title="vue 用的算法是找 最长递增子序列，而非 最长递增连续子序列，因为连续子序列不一定是最优解"></a>vue 用的算法是找 最长递增子序列，而非 最长递增连续子序列，因为连续子序列不一定是最优解</h3><p>(Leetcode 最长递增子序列)[<a href="https://leetcode-cn.com/problems/longest-increasing-subsequence/]" target="_blank" rel="noopener">https://leetcode-cn.com/problems/longest-increasing-subsequence/]</a></p>
<h4 id="数组求最大值"><a href="#数组求最大值" class="headerlink" title="数组求最大值"></a>数组求最大值</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.max(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br><span class="line"><span class="built_in">Math</span>.max(...[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>])</span><br></pre></td></tr></table></figure>

<h3 id="v-for-遍历必须为-item-添加-key，且避免同时使用-v-if"><a href="#v-for-遍历必须为-item-添加-key，且避免同时使用-v-if" class="headerlink" title="v-for 遍历必须为 item 添加 key，且避免同时使用 v-if"></a>v-for 遍历必须为 item 添加 key，且避免同时使用 v-if</h3><p>（1）v-for 遍历必须为 item 添加 key</p>
<p>在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。</p>
<p>（2）v-for 遍历避免同时使用 v-if</p>
<p>v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。</p>
<p>它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：</p>
<p>完整地触发组件的生命周期钩子<br>触发过渡<br>例如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">:key</span>=<span class="string">"text"</span>&gt;</span>&#123;&#123; text &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。</span></p>
<p>(3)如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。</p>
<h3 id="事件的销毁"><a href="#事件的销毁" class="headerlink" title="事件的销毁"></a>事件的销毁</h3><p>Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">created() &#123;  addEventListener(<span class="string">'click'</span>,<span class="keyword">this</span>.click,<span class="literal">false</span>)&#125;,beforeDestroy() &#123;  removeEventListener(<span class="string">'click'</span>,<span class="keyword">this</span>.click,<span class="literal">false</span>)&#125;复制代码</span><br></pre></td></tr></table></figure>

<h3 id="第三方插件的按需引入"><a href="#第三方插件的按需引入" class="headerlink" title="第三方插件的按需引入"></a>第三方插件的按需引入</h3><h4 id="Webpack-对图片进行压缩"><a href="#Webpack-对图片进行压缩" class="headerlink" title="Webpack 对图片进行压缩"></a>Webpack 对图片进行压缩</h4><p>在 vue 项目中除了可以在webpack.base.conf.js中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用image-webpack-loader来压缩图片：</p>
<p>（1）首先，安装 image-webpack-loader </p>
<p>npm install image-webpack-loader –save-dev复制代码</p>
<p>（2）然后，在 webpack.base.conf.js  中进行配置：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attr">test</span>:<span class="regexp">/\.(png|jpe?g|gif|svg)(\?.*)?$/</span>,<span class="attr">use</span>:[    &#123;<span class="attr">loader</span>:<span class="string">'url-loader'</span>,<span class="attr">options</span>: &#123;<span class="attr">limit</span>:<span class="number">10000</span>,<span class="attr">name</span>: utils.assetsPath(<span class="string">'img/[name].[hash:7].[ext]'</span>)      &#125;    &#125;,    &#123;<span class="attr">loader</span>:<span class="string">'image-webpack-loader'</span>,<span class="attr">options</span>: &#123;<span class="attr">bypassOnDebug</span>:<span class="literal">true</span>,      &#125;    &#125;  ]&#125;复制代码</span><br></pre></td></tr></table></figure>

<p>####提取公共代码</p>
<h2 id="关于vue项目在build出现的问题"><a href="#关于vue项目在build出现的问题" class="headerlink" title="关于vue项目在build出现的问题"></a>关于vue项目在build出现的问题</h2><p>找到config文件夹下的index.js文件修改一下build中的</p>
<p>assetsPublicPath: ‘/‘,</p>
<p>改为assetsPublicPath: ‘./‘,（在/前加.）</p>
<p>2、背景图片路径不对</p>
<p>在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (options.extract) &#123;</span><br><span class="line">    <span class="keyword">return</span> ExtractTextPlugin.extract(&#123;</span><br><span class="line">      use: loaders,</span><br><span class="line">      fallback: <span class="string">'vue-style-loader'</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="string">'vue-style-loader'</span>].concat(loaders)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在这一段代码中添加：publicPath: ‘../../‘，改后如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (options.extract) &#123;</span><br><span class="line">      <span class="keyword">return</span> ExtractTextPlugin.extract(&#123;</span><br><span class="line">        use: loaders,</span><br><span class="line">        fallback: <span class="string">'vue-style-loader'</span>,</span><br><span class="line">        publicPath: <span class="string">'../../'</span></span><br><span class="line">      &#125;)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> [<span class="string">'vue-style-loader'</span>].concat(loaders)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h3 id="keep-alive的正确使用"><a href="#keep-alive的正确使用" class="headerlink" title="keep-alive的正确使用"></a>keep-alive的正确使用</h3><h3 id="组件按需加载"><a href="#组件按需加载" class="headerlink" title="组件按需加载"></a>组件按需加载</h3><h4 id="使用-CDN-外部加载资源"><a href="#使用-CDN-外部加载资源" class="headerlink" title="使用 CDN 外部加载资源"></a>使用 CDN 外部加载资源</h4><p>次优化主要是针对echarts，在其文档里也有提到按需加载,但是这次我们不用按需加载了，我想把echarts彻底干掉！我们这次要使用webpack的externals，参考这里<br>在webpack.base.config.js中,做如下改动<br>//webpack.base.config.js   module.exports中增加externals对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    externals: &#123;</span><br><span class="line">        <span class="string">"echarts"</span>: <span class="string">"echarts"</span>        <span class="comment">//默认是配置引用的库（这里是echarts）暴露出的全局变量</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>作者：AllenN<br>链接：<a href="https://juejin.im/post/5b0033c9518825056508075f" target="_blank" rel="noopener">https://juejin.im/post/5b0033c9518825056508075f</a><br>来源：掘金<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
<h2 id="尤大大聊-vue3-0-BETA"><a href="#尤大大聊-vue3-0-BETA" class="headerlink" title="尤大大聊 vue3.0-BETA"></a>尤大大聊 vue3.0-BETA</h2><ul>
<li>去 RFC 上了解 <code>vue3.0</code>,可以更了解比较全面</li>
</ul>
<ol>
<li>性能提高 -performance </li>
</ol>
<p>速度 比 vue2.0快2-3倍</p>
<p>Vue 3 Template Explorer 可以测代码被编译的东西</p>
<p>Vue composition api<br>2. 无用的不进入打包<br>3. </p>
<h2 id="重排和重绘"><a href="#重排和重绘" class="headerlink" title="重排和重绘"></a>重排和重绘</h2><p>理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排。</p>
<h3 id="重排（Relayout-Reflow）"><a href="#重排（Relayout-Reflow）" class="headerlink" title="重排（Relayout/Reflow）"></a>重排（Relayout/Reflow）</h3><p>在弄明白什么是重排之前，我们要知道：浏览器渲染页面默认采用的是流式布局模型（Flow Based Layout），这一点很重要。</p>
<p>页面首次渲染。</p>
<p>浏览器窗口大小发生改变。</p>
<p>元素尺寸或位置发生改变。</p>
<p>元素内容变化（文字数量或图片大小等等）。</p>
<p>元素字体大小变化。</p>
<p>添加或者删除可见的DOM元素。</p>
<p>激活CSS伪类（例如：:hover）。</p>
<p>设置style属性</p>
<p>查询某些属性或调用某些方法。</p>
<h3 id="减少重排"><a href="#减少重排" class="headerlink" title="减少重排"></a>减少重排</h3><p>避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性</p>
<p>实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局</p>
<p>动画实现的速度的选择。比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。</p>
<p>不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围</p>
<h3 id="css及动画处理"><a href="#css及动画处理" class="headerlink" title="css及动画处理"></a>css及动画处理</h3><p>少用css表达式</p>
<p>减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；</p>
<p>动画尽量使用在绝对定位或固定定位的元素上；</p>
<p>隐藏在屏幕外，或在页面滚动时，尽量停止动画</p>
<p>作者：小白师兄<br>链接：<a href="http://www.imooc.com/article/45936" target="_blank" rel="noopener">http://www.imooc.com/article/45936</a><br>来源：慕课网<br>本文原创发布于慕课网 ，转载请注明出处，谢谢合作</p>
<h2 id="为什么在foreach要抛异常才能停止"><a href="#为什么在foreach要抛异常才能停止" class="headerlink" title="为什么在foreach要抛异常才能停止"></a>为什么在foreach要抛异常才能停止</h2><ol>
<li>里面是函数,每次迭代都是调用一次函数</li>
<li>在函数体内只能控制当前的函数  不能控制调用方<h2 id="localstorage玩法"><a href="#localstorage玩法" class="headerlink" title="localstorage玩法"></a>localstorage玩法</h2><h3 id="如何让-localStorage-实现和-cookie-一样的自动过期功能？"><a href="#如何让-localStorage-实现和-cookie-一样的自动过期功能？" class="headerlink" title="如何让 localStorage 实现和 cookie 一样的自动过期功能？"></a>如何让 localStorage 实现和 cookie 一样的自动过期功能？</h3></li>
</ol>
<p>localStorage 是长效存储的，但是有的场景希望用它来实现数据缓存功能，并且像 cookie 一样可以设置时间，这该如何处理。比如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 设置本地存储 </span></span><br><span class="line"><span class="comment">* <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>name key </span></span><br><span class="line"><span class="comment">* <span class="doctag">@param <span class="type">&#123;*&#125;</span> </span>value value 可以是string、obj等 </span></span><br><span class="line"><span class="comment">* <span class="doctag">@param <span class="type">&#123;number&#125;</span> </span>time 缓存时间(ms) </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> setStorage = <span class="function">(<span class="params">name, data, cacheTime</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (!name) <span class="keyword">return</span>;</span><br><span class="line">    <span class="keyword">const</span> storage = &#123;</span><br><span class="line">        createdTime: <span class="keyword">new</span> <span class="built_in">Date</span>().getTime(),</span><br><span class="line">        cacheTime,</span><br><span class="line">        data</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="built_in">window</span>.localStorage.setItem(name, <span class="built_in">JSON</span>.stringify(storage));</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment">* 获取本地存储 </span></span><br><span class="line"><span class="comment">* 如果未设置缓存时间或者在缓存时间内则返回数据 </span></span><br><span class="line"><span class="comment">* 如果过期则返回 undefined * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>name key </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> getStorage = <span class="function"><span class="params">name</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (!name) <span class="keyword">return</span>;</span><br><span class="line">    <span class="keyword">const</span> storage = <span class="built_in">JSON</span>.parse(<span class="built_in">window</span>.localStorage.getItem(name));</span><br><span class="line">    <span class="keyword">if</span> (!storage) <span class="keyword">return</span>;</span><br><span class="line">    <span class="keyword">if</span> (storage.cacheTime &amp;&amp; <span class="keyword">new</span> <span class="built_in">Date</span>().getTime() - storage.createdTime &gt; storage.cacheTime) &#123;</span><br><span class="line">        clearStorage(name);</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> storage.data;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment">* 清除本地存储 </span></span><br><span class="line"><span class="comment">* <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>name key </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> clearStorage = <span class="function"><span class="params">name</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (!name) <span class="keyword">return</span>;</span><br><span class="line">    <span class="built_in">window</span>.localStorage.removeItem(name);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="null和undefined的区别"><a href="#null和undefined的区别" class="headerlink" title="null和undefined的区别"></a>null和undefined的区别</h2><ul>
<li>在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span>==<span class="literal">undefined</span>);    <span class="comment">//true  因为两者都默认转换成了false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="literal">undefined</span>);    <span class="comment">//"undefined"  </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="literal">null</span>);       <span class="comment">//"object"  </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span>===<span class="literal">undefined</span>);    <span class="comment">//false   "==="表示绝对相等，null和undefined类型是不一样的，所以输出“false”</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<p><code>null</code>表示没有对象，即该处不应该有值</p>
<ol>
<li><p>作为函数的参数，表示该函数的参数不是对象</p>
</li>
<li><p>作为对象原型链的终点</p>
<h3 id="undefined表示缺少值，即此处应该有值，但没有定义"><a href="#undefined表示缺少值，即此处应该有值，但没有定义" class="headerlink" title="undefined表示缺少值，即此处应该有值，但没有定义"></a>undefined表示缺少值，即此处应该有值，但没有定义</h3></li>
<li><p>定义了形参，没有传实参，显示 <code>undefined</code></p>
</li>
<li><p>对象属性名不存在时，显示 <code>undefined</code></p>
</li>
<li><p>函数没有写返回值，即没有写return，拿到的是 <code>undefined</code></p>
</li>
<li><p>写了return，但没有赋值，拿到的是undefined</p>
</li>
</ol>
<h3 id="null和undefined转换成number数据类型"><a href="#null和undefined转换成number数据类型" class="headerlink" title="null和undefined转换成number数据类型"></a>null和undefined转换成number数据类型</h3><ol>
<li><p><code>null</code> 默认转成 0</p>
</li>
<li><p><code>undefined</code> 默认转成 <code>NaN</code></p>
</li>
</ol>
<p>链接：<a href="https://www.jianshu.com/p/7514e2d56661" target="_blank" rel="noopener">https://www.jianshu.com/p/7514e2d56661</a></p>
<h2 id="对接扫码抢或者类似pos机出现拿到付款码没有支付的解决办法"><a href="#对接扫码抢或者类似pos机出现拿到付款码没有支付的解决办法" class="headerlink" title="对接扫码抢或者类似pos机出现拿到付款码没有支付的解决办法"></a>对接扫码抢或者类似pos机出现拿到付款码没有支付的解决办法</h2><ul>
<li>很大的可能是因为你的付款码被取到后没有回车功能，所以碰到没法支付时一般会在付款码后缀加上<code>\n</code></li>
<li><code>\n</code>代表 <code>enter</code> 或者 换行符<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> faceCode=<span class="string">'12334444'</span></span><br><span class="line">faceCode=faceCode+<span class="string">'\n'</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="面向对象编程和面向接口编程"><a href="#面向对象编程和面向接口编程" class="headerlink" title="面向对象编程和面向接口编程"></a>面向对象编程和面向接口编程</h2><h3 id="1-什么是面向接口编程"><a href="#1-什么是面向接口编程" class="headerlink" title="1.什么是面向接口编程?"></a>1.什么是面向接口编程?</h3><blockquote>
<p>面向接口英文名是 Interface Oriented Design 面向接口编程是开发程序的功能先定义接口,接口中定义约定好的功能方法声明,通过实现该接口进行功能的实现,完成软件或项目的要求.软件或项目随着时间的不断变化,软件的功能要进行升级或完善,开发人员只需要创建不同的新类重新实现该接口中所有方法,就可以达到系统升级和扩展的目的.</p>
</blockquote>
<h3 id="2-什么是面向对象编程"><a href="#2-什么是面向对象编程" class="headerlink" title="2.什么是面向对象编程"></a>2.什么是面向对象编程</h3><blockquote>
<p>面向对象，英文名字叫Object Oriented，是一种软件开发方法。是和面向过程相对应的。特性就是封装、继承、多态、</p>
</blockquote>
<h4 id="什么是封装？"><a href="#什么是封装？" class="headerlink" title="什么是封装？"></a>什么是封装？</h4><p>我们把「数据」和「能力」组合成一个对象的过程就叫做「封装」。</p>
<p>封装的结果就是可以有一个类，通过这个类我们可以获得一个对象。然后我们就可以通过给这个对象下命令，让他执行自己的「能力」。</p>
<p>除了把「数据」和「能力」封装成一个「对象」更加方便使用以外，还有啥其他的特点么？</p>
<p>封装只是面向对象的第一步，目的是把现实世界的东西抽象成对象。面向对象真正有威力的地方是「继承」和「多态」。</p>
<!-- more -->
<p>举一个不是很恰当，但是女朋友比较容易理解的例子。</p>
<p>我们使用外卖软件点餐，当我们第二次去某一家店时，外卖软件会提示你上一次你在这家点了什么，你可以点击&lt;再来一单&gt;把上次的菜品直接加到购物车中，这就是「继承」。而在购物车中的物品你可以直接付款下单，也可以把增删和修改菜品。这就是「多态」。</p>
<h4 id="什么是继承？"><a href="#什么是继承？" class="headerlink" title="什么是继承？"></a>什么是继承？</h4><p>在面向对象编程中，当两个类具有相同的特征（属性）和行为（方法）时，可以将相同的部分抽取出来放到一个类中作为父类，其它两个类「继承」这个父类。继承后子类自动拥有了父类的部分属性和方法。</p>
<p>通过继承创建的新类称为“子类”或“派生类”。</p>
<p>被继承的类称为“基类”、“父类”或“超类”。</p>
<p>比如：</p>
<p>狗{吠；}牧羊犬 继承 狗{放羊;}<br>上面的例子中，狗类是父类，牧羊犬类是子类。牧羊犬类通过继承获得狗类的吠的能力，同时增加了自己独有的放羊的能力。</p>
<h4 id="什么是多态？"><a href="#什么是多态？" class="headerlink" title="什么是多态？"></a>什么是多态？</h4><p>同一操作，作用于不同的对象，可以产生不同的结果，这就是「多态」。通常说的多态都是指运行期的多态，也叫动态绑定。</p>
<p>要实现多态，需要满足三个条件：</p>
<p>有类继承或接口实现、子类重写父类的方法、父类引用指向子类的对象。比如：</p>
<p>犬科动物{吠;}狗 继承 犬科动物{吠{旺旺旺}}狼 继承 犬科动物{吠{嗷嗷嗷}}<br>狗和狼都是犬科动物，拉来一直犬科动物，如果它你叫的话，你可能没办法直接分辨出他到底是狼还是狗。只要他真正的叫出来的时候，你才知道。这就是运行时多态。</p>
<p>有人说，你自己定义的对象，定义的时候不就知道到底是什么类的对象了么，这个其实并不决定的，很多时候我们可能不知道，原因是，对象可能并不是我们自己创建出来的。</p>
<p><a href="https://baijiahao.baidu.com/s?id=1626333751993181194&wfr=spider&for=pc" target="_blank" rel="noopener">参考来源-漫画编程</a></p>
<h3 id="3-面向接口编程与面向对象开发的区别"><a href="#3-面向接口编程与面向对象开发的区别" class="headerlink" title="3.面向接口编程与面向对象开发的区别:"></a>3.面向接口编程与面向对象开发的区别:</h3><p>面向对象开发:<br>UserDao dao = new UserDao();</p>
<p>假设项目开发中dao层的技术要升级改造,那么面向对象开发有两种实现方式</p>
<p>将UserDao中的代码删除,全部重写,但是方法名称不允许改变,为了不影响其他层,如service层调用dao的方法<br>创建一个新的类,如:UserDaoTwo 所有的方法名称照搬,用新技术重写方法体中的内容,但是需要调用dao层的位置,要全部更换为新的类,new UserDaoTwo();<br>面向接口编程:</p>
<p>UserDao dao = new UserDaoImpl();</p>
<p>1.项目需要升级改造时:</p>
<ul>
<li>不需要修改原来的类,只要创建一个新的类,实现这个接口,以前的方法全部都有,只要重写方法体即可,不会漏写</li>
<li>为了不在调用dao处,修改多次,可以写为UserDao dao = 工具类.getImpl(); 这时如果我们项目升级过程中更改了实现类,只需要在工具类中修改一次,项目中就全部修改了<br>这时我们又发现,工具类中如果给多个接口返回实现类,就有如下代码冗余的问题:</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">getBean</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">       <span class="keyword">return</span> <span class="keyword">new</span> UserDaoImpl();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">getCategoryBean</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">       <span class="keyword">return</span> <span class="keyword">new</span> CategoryDaoImpl();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">getFavoriteDaoImpl</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">   	 <span class="keyword">return</span> <span class="keyword">new</span> FavoriteDaoImpl();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getApi</span>(<span class="params">type</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">switch</span> (type)&#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'user'</span>:</span><br><span class="line">    <span class="keyword">return</span> getBean();</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'cat'</span>:</span><br><span class="line">    <span class="keyword">return</span>  getCategoryBean()</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'favorit'</span>:</span><br><span class="line">    <span class="keyword">return</span> getFavoriteDaoImpl();</span><br><span class="line">    <span class="keyword">default</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-面向接口编程的好处"><a href="#4-面向接口编程的好处" class="headerlink" title="4.面向接口编程的好处"></a>4.面向接口编程的好处</h3><p>降低了程序的耦合性.其能够最大限度的解耦，所谓解耦既是解耦合的意思，它和耦合相对。耦合就是联系，耦合越强，联系越紧密。在程序中紧密的联系并不是一件好的事情，因为两种事物之间联系越紧密，你更换其中之一的难度就越大，扩展功能和debug的难度也就越大。<br>易扩展. 我们知道程序设计的原则是对修改关闭,对新增开放.面向接口编程扩展功能只需要创建新实现类重写接口方法进行升级扩展就可以,达到了在不修改源码的基础上扩展的目的.<br>易维护</p>
<p><a href="https://blog.csdn.net/Cyy19970527/java/article/details/83177996" target="_blank" rel="noopener">面向接口思想</a></p>
<h2 id="将对象的属性值保存为局部变量"><a href="#将对象的属性值保存为局部变量" class="headerlink" title="将对象的属性值保存为局部变量"></a>将对象的属性值保存为局部变量</h2><p>对象成员嵌套越深，读取速度也就越慢。所以好的经验法则是：如果在函数中需要多次读取一个对象属性，最佳做法是将该属性值保存在局部变量中，避免多次查找带来的性能开销。</p>
<p>推荐：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    info:&#123;</span><br><span class="line">        sex:<span class="string">'男'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span>  <span class="title">getMaleSex</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> sex = person.info.sex;</span><br><span class="line">    <span class="keyword">if</span>(sex === <span class="string">'男'</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(sex)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="H5直接唤起照相机"><a href="#H5直接唤起照相机" class="headerlink" title="H5直接唤起照相机"></a>H5直接唤起照相机</h2><ul>
<li>使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能<br>[参考链接](<a href="https://www.cnblogs.com/LisenH/p/11635919.html）" target="_blank" rel="noopener">https://www.cnblogs.com/LisenH/p/11635919.html）</a><br>iOS最遵守遵守HTML5规范，其次是X5内核，安卓的webview基本忽略了capture。<br>理想情况下应该按照如下开发webview：</li>
</ul>
<ol>
<li>当accept=”image/*”时，capture=”user”调用前置照相机，capture=”其他值”，调用后置照相机</li>
<li>当accept=”video/*”时，capture=”user”调用前置录像机，capture=”其他值”，调用后置录像机</li>
<li>当accept=”image/<em>,video/</em>”，capture=”user”调用前置摄像头，capture=”其他值”，调用后置摄像头，默认照相，可切换录像</li>
<li>当accept=”audio/*”时，capture=”放空或者任意值”，调用录音机</li>
<li>当input没有capture时，根据accppt类型给出文件夹选项以及摄像头或者录音机选项</li>
<li>input含有multiple时访问文件夹可勾选多文件，调用系统摄像头或者录音机都只是单文件</li>
<li>无multiple时都只能单文件<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">accept</span>=<span class="string">"image/*"</span> <span class="attr">capture</span>=<span class="string">"camera"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">accept</span>=<span class="string">"video/*"</span> <span class="attr">capture</span>=<span class="string">"camcorder"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">accept</span>=<span class="string">"audio/*"</span> <span class="attr">capture</span>=<span class="string">"microphone"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">accept表示，直接打开系统文件目录。 --&gt;</span></span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2><h3 id="super"><a href="#super" class="headerlink" title="super"></a>super</h3><ul>
<li>作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">B</span> <span class="keyword">extends</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">  m() &#123;</span><br><span class="line">    <span class="keyword">super</span>(); <span class="comment">// 报错</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="addEventListener-与removeEventListener"><a href="#addEventListener-与removeEventListener" class="headerlink" title="addEventListener()与removeEventListener()"></a>addEventListener()与removeEventListener()</h2><p>通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="keyword">this</span>.id);</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br><span class="line">btn.removeEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;  <span class="comment">//无效！</span></span><br><span class="line">    alert(<span class="keyword">this</span>.id);</span><br><span class="line"></span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br><span class="line"><span class="comment">// 原文链接：https://blog.csdn.net/xiasohuai/article/details/83063293</span></span><br></pre></td></tr></table></figure>

<h2 id="让video标签铺满div"><a href="#让video标签铺满div" class="headerlink" title="让video标签铺满div"></a>让video标签铺满div</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.video</span>&#123;</span><br><span class="line">  object-fit: fill;// 让视频铺满div</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>在VUE监听键盘事件<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"> data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      orderNumber: <span class="string">''</span>,</span><br><span class="line">      isEnter: <span class="literal">false</span>,</span><br><span class="line">      eventFn: <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    <span class="keyword">this</span>.eventFn = <span class="function">(<span class="params">event</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(event)</span><br><span class="line">      <span class="keyword">var</span> e = event || <span class="built_in">window</span>.event || <span class="built_in">arguments</span>.calle.caller.arguments[<span class="number">0</span>]</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">this</span>.isEnter) &#123;</span><br><span class="line">        <span class="keyword">this</span>.orderNumber = <span class="string">''</span></span><br><span class="line">        <span class="keyword">this</span>.isEnter = <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (e &amp;&amp; e.key === <span class="string">'Enter'</span>) &#123; <span class="comment">// enter 键</span></span><br><span class="line">        <span class="comment">// 要做的事情</span></span><br><span class="line">        <span class="keyword">this</span>.isEnter = <span class="literal">true</span></span><br><span class="line">        <span class="keyword">this</span>.checkOrderNumber(<span class="keyword">this</span>.orderNumber)</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">console</span>.log(<span class="string">'enter'</span>, <span class="keyword">this</span>.orderNumber)</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (e &amp;&amp; e.key !== <span class="string">'Enter'</span>) &#123; <span class="comment">// enter 键</span></span><br><span class="line">        <span class="comment">// 要做的事情</span></span><br><span class="line">        <span class="keyword">this</span>.orderNumber += event.key</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">window</span>.addEventListener(<span class="string">'keydown'</span>, <span class="keyword">this</span>.eventFn)</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    checkOrderNumber(val) &#123;</span><br><span class="line">      indexApi.orderDestroy(&#123; <span class="attr">destroy</span>: <span class="number">1</span>, <span class="attr">orderNumbers</span>: [val] &#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (res.code === <span class="number">200</span>) &#123;</span><br><span class="line">          <span class="keyword">this</span>.$toast.success(<span class="string">'验票成功'</span>)</span><br><span class="line">          <span class="keyword">this</span>.$emit(<span class="string">'success'</span>)</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="keyword">this</span>.$toast.fail(res.msg)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  beforeDestroy() &#123;</span><br><span class="line">    <span class="built_in">window</span>.removeEventListener(<span class="string">'keydown'</span>, <span class="keyword">this</span>.eventFn)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</h2><h3 id="设置浏览器缓存有下面几种方法"><a href="#设置浏览器缓存有下面几种方法" class="headerlink" title="设置浏览器缓存有下面几种方法"></a>设置浏览器缓存有下面几种方法</h3><p>设置浏览器缓存有下面几种方法</p>
<p>Last-Modified：服务器上文件的最后修改时间</p>
<p>Etag：文件标识</p>
<p>Expires：本地缓存目录中，文件过期的时间（由服务器指定具体的时间）</p>
<p>Cache-control：本地缓存目录中，文件过期的时间（由服务器指定过期的间隔时间，由于浏览器根据间隔生成具体的时间）</p>
<h3 id="刷新浏览器的方法"><a href="#刷新浏览器的方法" class="headerlink" title="刷新浏览器的方法"></a>刷新浏览器的方法</h3><ol>
<li>reload 方法，该方法强迫浏览器刷新当前页面。<br>语法：location.reload([bForceGet])<br>参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)</li>
</ol>
<p>reload() 方法用于重新加载当前文档。<br>如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。</p>
<ol start="2">
<li>replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。<br>语法： location.replace(URL)<br>通常使用： location.reload() 或者是 history.go(0) 来做。<br>此方法类似客户端点F5刷新页面，所以页面method=”post”时，会出现”网页过期”的提示。<br>因为Session的安全保护机制。<br>当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。<br>如果有这种应用： 需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。<br>这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。<br>代码： location.replace(location.href);<br>返回并刷新页面：</li>
</ol>
<p>location.replace(document.referrer);<br>document.referrer //前一个页面的URL</p>
<p>不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。<br>3. Javascript刷新页面的几种方法：<br>1，history.go(0)<br>2，location.reload()<br>3，location=location<br>4，location.assign(location)<br>5，document.execCommand(‘Refresh’)<br>6，window.navigate(location)<br>7，location.replace(location)<br>8，document.URL=location.href</p>
<!-- more -->


<h2 id="number不能设置为属性"><a href="#number不能设置为属性" class="headerlink" title="number不能设置为属性"></a>number不能设置为属性</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Uncaught (in promise) TypeError: Cannot create property '__' on number '154'</span><br><span class="line">    at request</span><br></pre></td></tr></table></figure>

<h2 id="iview-Table默认选中方法"><a href="#iview-Table默认选中方法" class="headerlink" title="iview Table默认选中方法"></a>iview Table默认选中方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$refs.table.$refs.tbody.objData[index]._isChecked = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>

<h2 id="封装findIndex"><a href="#封装findIndex" class="headerlink" title="封装findIndex"></a>封装findIndex</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.findIndex(array, callback) &#123;</span><br><span class="line">  <span class="keyword">let</span> index = <span class="number">-1</span></span><br><span class="line">  <span class="keyword">if</span> (array.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; array.length; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (callback(array[i], i)) &#123;</span><br><span class="line">  index = i</span><br><span class="line">  <span class="keyword">break</span></span><br><span class="line">  &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> index</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="built_in">Array</span>.prototype.findIndex1(array, callback) &#123;</span><br><span class="line">  <span class="keyword">let</span> currentIndex = <span class="number">-1</span></span><br><span class="line">  <span class="keyword">if</span> (array.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    array.forEach(<span class="function">(<span class="params">item, idnex</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (callback(item, idnex)) &#123;</span><br><span class="line">  <span class="comment">// console.log('切断' + item)</span></span><br><span class="line">  currentIndex = idnex</span><br><span class="line">  <span class="keyword">throw</span> <span class="built_in">Error</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123; </span><br><span class="line">  &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> currentIndex</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h2 id="VUE-v-model"><a href="#VUE-v-model" class="headerlink" title="VUE v-model"></a>VUE v-model</h2><ul>
<li>v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，v-model 只是语法糖而已：↓</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-model=<span class="string">"sth"</span> /&gt;</span><br><span class="line">&lt;input v-bind:value=<span class="string">"sth"</span> v-on:input=<span class="string">"sth = $event.target.value"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：↓</span></span><br><span class="line">&lt;input :value=<span class="string">"sth"</span> @input=<span class="string">"sth = $event.target.value"</span> /&gt;</span><br></pre></td></tr></table></figure>

<p>这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 sth</p>
<p>如果你不知道 <a href="https://cn.vuejs.org/v2/guide/events.html#%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6" target="_blank" rel="noopener">$event</a> 是从哪来的，那你需要点击它再复习一下文档。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">"demo"</span>&gt;</span><br><span class="line">  &lt;currency-input v-model=<span class="string">"price"</span>&gt;&lt;<span class="regexp">/currentcy-input&gt;</span></span><br><span class="line"><span class="regexp">  &lt;span&gt;&#123;&#123;price&#125;&#125;&lt;/</span>span&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;script src="https:/</span><span class="regexp">/cdn.bootcss.com/</span>vue/<span class="number">2.3</span><span class="number">.0</span>/vue.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string">Vue.component('currency-input', &#123;</span></span><br><span class="line"><span class="string">  template: `</span></span><br><span class="line"><span class="string">    &lt;span&gt;</span></span><br><span class="line"><span class="string">      &lt;input</span></span><br><span class="line"><span class="string">        ref="</span>input<span class="string">"</span></span><br><span class="line"><span class="string">        :value="</span>value<span class="string">"</span></span><br><span class="line"><span class="string">        &lt;!--为什么这里把 'input' 作为触发事件的事件名？`input` 在哪定义的？--&gt;</span></span><br><span class="line"><span class="string">        @input="</span>$emit(<span class="string">'input'</span>, $event.target.value)<span class="string">"</span></span><br><span class="line"><span class="string">      &gt;</span></span><br><span class="line"><span class="string">    &lt;/span&gt;</span></span><br><span class="line"><span class="string">  `,</span></span><br><span class="line"><span class="string">  props: ['value'],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？</span></span><br><span class="line"><span class="string">&#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">var demo = new Vue(&#123;</span></span><br><span class="line"><span class="string">  el: '#demo',</span></span><br><span class="line"><span class="string">  data: &#123;</span></span><br><span class="line"><span class="string">    price: 100,</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;)</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;currency-input v-model=<span class="string">"price"</span>&gt;&lt;<span class="regexp">/currentcy-input&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 行代码是下行的语法糖</span></span><br><span class="line"><span class="regexp">&lt;currency-input :value="price" @input="price = arguments[0]"&gt;&lt;/</span>currency-input&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// v-model === :value</span></span><br></pre></td></tr></table></figure>

<ul>
<li>在 Vue 2.2 版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event：↓</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;my-checkbox v-model=<span class="string">"foo"</span>&gt;&lt;<span class="regexp">/my-checkbox&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">Vue.component('my-checkbox', &#123;</span></span><br><span class="line"><span class="regexp">  tempalte: `&lt;input </span></span><br><span class="line"><span class="regexp">               type="checkbox"</span></span><br><span class="line"><span class="regexp">               &lt;!--这里就不用 input 了，而是 balabala--&gt;</span></span><br><span class="line"><span class="regexp">               @change="$emit('balabala', $event.target.checked)"</span></span><br><span class="line"><span class="regexp">               :checked="checked"</span></span><br><span class="line"><span class="regexp">             /</span>&gt;<span class="string">`</span></span><br><span class="line"><span class="string">  props: ['checked'], //这里就不用 value 了，而是 checked</span></span><br><span class="line"><span class="string">  model: &#123;</span></span><br><span class="line"><span class="string">    prop: 'checked',</span></span><br><span class="line"><span class="string">    event: 'balabala'</span></span><br><span class="line"><span class="string">  &#125;,</span></span><br><span class="line"><span class="string">&#125;)</span></span><br></pre></td></tr></table></figure>

<h3 id="scoped样式穿透"><a href="#scoped样式穿透" class="headerlink" title="scoped样式穿透"></a>scoped样式穿透</h3><p>scoped虽然避免了组件间样式污染，但是很多时候我们需要修改组件中的某个样式，但是又不想去除scoped属性。</p>
<ol>
<li>使用/deep/<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Parent</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"wrap"</span>&gt;</span><br><span class="line">    &lt;Child /&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line"></span><br><span class="line">&lt;style lang=<span class="string">"scss"</span> scoped&gt;</span><br><span class="line">.wrap /deep/ .box&#123;</span><br><span class="line">    background: red;</span><br><span class="line">&#125;</span><br><span class="line">&lt;<span class="regexp">/style&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/Child</span></span><br><span class="line"><span class="regexp">&lt;template&gt;</span></span><br><span class="line"><span class="regexp">    &lt;div class="box"&gt;&lt;/</span>div&gt;</span><br><span class="line">&lt;<span class="regexp">/template&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">`</span></span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="对象的复制"><a href="#对象的复制" class="headerlink" title="对象的复制"></a>对象的复制</h2><h3 id="浅复制"><a href="#浅复制" class="headerlink" title="浅复制"></a>浅复制</h3><ul>
<li>浅拷贝时，改变属性的属性值，改变原对象</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> target = &#123;<span class="attr">a</span>: <span class="number">123</span>&#125;;</span><br><span class="line"><span class="keyword">let</span> source1 = &#123;<span class="attr">b</span>: <span class="number">456</span>&#125;;</span><br><span class="line"><span class="keyword">let</span> source2 = &#123;<span class="attr">c</span>: <span class="number">789</span>&#125;;</span><br><span class="line"><span class="keyword">let</span> obj = <span class="built_in">Object</span>.assign(target, source1, source2);</span><br><span class="line"><span class="built_in">console</span>.log(obj)</span><br></pre></td></tr></table></figure>

<h3 id="深复制"><a href="#深复制" class="headerlink" title="深复制"></a>深复制</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="number">123</span>,</span><br><span class="line">    b: &#123;</span><br><span class="line">        c: <span class="number">456</span>,</span><br><span class="line">        d: &#123;</span><br><span class="line">            e: <span class="number">789</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> copy = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj));</span><br><span class="line"><span class="comment">// 对obj对象无论怎么修改，都不会影响到copy对象</span></span><br><span class="line">obj.b.c = <span class="string">'hello'</span>;</span><br><span class="line">obj.b.d.e = <span class="string">'world'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(copy);  <span class="comment">// &#123;a: 123, b: &#123;c: 456, d: &#123;e: 789&#125;&#125;&#125;</span></span><br></pre></td></tr></table></figure>

<p>对数组深拷贝之后，改变原数组不会影响到拷贝之后的数组。</p>
<p>但是该方法有以下几个问题：</p>
<p>（1）会忽略 <code>undefined</code></p>
<p>（2）会忽略 <code>symbol</code></p>
<p>（3）不能序列化函数</p>
<p>（4）不能解决循环引用的对象</p>
<p>（5）不能正确处理<code>new Date()</code></p>
<p>（6）不能处理正则</p>
<p>其中（1）（2）（3） <code>undefined</code>、<code>symbol</code> 和函数这三种情况，会直接忽略。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// saucxs</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    name: <span class="string">'saucxs'</span>,</span><br><span class="line">    a: <span class="literal">undefined</span>,</span><br><span class="line">    b: <span class="built_in">Symbol</span>(<span class="string">'saucxs'</span>),</span><br><span class="line">    c: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj);</span><br><span class="line"><span class="comment">// &#123;</span></span><br><span class="line"><span class="comment">// 	name: "saucxs", </span></span><br><span class="line"><span class="comment">// 	a: undefined, </span></span><br><span class="line"><span class="comment">//  b: Symbol(saucxs), </span></span><br><span class="line"><span class="comment">//  c: ƒ ()</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj));</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line"><span class="comment">// &#123;name: "saucxs"&#125;</span></span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line">其中（<span class="number">4</span>）循环引用会报错</span><br><span class="line"></span><br><span class="line"><span class="comment">// saucxs</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: &#123;</span><br><span class="line">        c: <span class="number">2</span>,</span><br><span class="line">   		d: <span class="number">3</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.a = obj.b;</span><br><span class="line">obj.b.c = obj.a;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj));</span><br><span class="line"><span class="comment">// Uncaught TypeError: Converting circular structure to JSON</span></span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><span class="comment">// 其中(5)* `new Date` 情况下，转换结果不正确。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// saucxs</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="comment">// Mon Dec 24 2018 10:59:14 GMT+0800 (China Standard Time)</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line"><span class="comment">// ""2018-12-24T02:59:25.776Z""</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(<span class="keyword">new</span> <span class="built_in">Date</span>()));</span><br><span class="line"><span class="comment">// "2018-12-24T02:59:41.523Z"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 解决方法转成字符串或者时间戳就好了。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// saucxs</span></span><br><span class="line"><span class="keyword">let</span> date = (<span class="keyword">new</span> <span class="built_in">Date</span>()).valueOf();</span><br><span class="line"><span class="comment">// 1545620645915</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(date);</span><br><span class="line"><span class="comment">// "1545620673267"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(date));</span><br><span class="line"><span class="comment">// 1545620658688</span></span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><span class="comment">// 其中（6）正则情况下</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// saucxs</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    name: <span class="string">"saucxs"</span>,</span><br><span class="line">    a: <span class="regexp">/'123'/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj);</span><br><span class="line"><span class="comment">// &#123;name: "saucxs", a: /'123'/&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(obj));</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line"><span class="comment">// &#123;name: "saucxs", a: &#123;&#125;&#125;</span></span><br></pre></td></tr></table></figure>

<p><a href="https://www.cnblogs.com/chengxs/p/10788442.html" target="_blank" rel="noopener">参考地址</a></p>
<h2 id="css总结"><a href="#css总结" class="headerlink" title="css总结"></a>css总结</h2><h3 id="解决移动端1px的问题"><a href="#解决移动端1px的问题" class="headerlink" title="解决移动端1px的问题"></a>解决移动端1px的问题</h3><p>由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点</p>
<p>所以 border: 1px 在移动端会渲染为 2px 的边框</p>
<p>虽然用户在实际使用的时候，很难发现这 1px 的差异，但是设计师往往会在这 1px 上较劲，这就产生了经典的 “一像素问题”</p>
<p>最简单的解决办法，就是用图片做边框，只是修改颜色不太方便。除此之外，还有两种常用的办法</p>
<h4 id="一、transform-scale"><a href="#一、transform-scale" class="headerlink" title="一、transform:scale"></a>一、transform:scale</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.border-bottom</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">border-top</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.border-bottom</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">" "</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#e4e4e4</span>;</span><br><span class="line">    <span class="attribute">-webkit-transform-origin</span>: left bottom;</span><br><span class="line">    <span class="attribute">transform-origin</span>: left bottom;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 2倍屏 */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio:</span> <span class="number">2.0</span>) &#123;</span><br><span class="line">    <span class="selector-class">.border-bottom</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">        <span class="attribute">-webkit-transform</span>: <span class="built_in">scaleY</span>(<span class="number">0.5</span>);</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">scaleY</span>(<span class="number">0.5</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 3倍屏 */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio:</span> <span class="number">3.0</span>) &#123;</span><br><span class="line">    <span class="selector-class">.border-bottom</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">        <span class="attribute">-webkit-transform</span>: <span class="built_in">scaleY</span>(<span class="number">0.33</span>);</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">scaleY</span>(<span class="number">0.33</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="二、viewport"><a href="#二、viewport" class="headerlink" title="二、viewport"></a>二、viewport</h4><p>网页的内容都渲染在 viewport 上，所以设备像素比的差异，直接影响的也是 viewport 的大小</p>
<p>通过 js 获取到设备像素比，然后动态添加 <meta> 标签</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">   (<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">       <span class="keyword">var</span> scale = <span class="number">1.0</span>;</span><br><span class="line">       <span class="keyword">if</span> (<span class="built_in">window</span>.devicePixelRatio === <span class="number">2</span>) &#123;</span><br><span class="line">           scale *= <span class="number">0.5</span>;</span><br><span class="line">       &#125;</span><br><span class="line">       <span class="keyword">if</span> (<span class="built_in">window</span>.devicePixelRatio === <span class="number">3</span>) &#123;</span><br><span class="line">           scale *= <span class="number">0.333333</span>;</span><br><span class="line">       &#125;</span><br><span class="line">       <span class="keyword">var</span> text = <span class="string">'&lt;meta name="viewport" content="initial-scale='</span> + scale + <span class="string">', maximum-scale='</span> + scale +<span class="string">', minimum-scale='</span> + scale + <span class="string">', width=device-width, user-scalable=no" /&gt;'</span>;</span><br><span class="line">       <span class="built_in">document</span>.write(text);       </span><br><span class="line">    &#125;)();</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="使用display：inline-block，出现元素高度错位"><a href="#使用display：inline-block，出现元素高度错位" class="headerlink" title="使用display：inline-block，出现元素高度错位"></a>使用display：inline-block，出现元素高度错位</h3><ul>
<li>‘inline-block’的baseline是其在normal flow中的最后一个line box的baseline，除非它没有in-flow line boxes，或者其‘overflow’属性不等于‘visible’，这种情况下，其baseline位于bottom margin边上。</li>
</ul>
<p>解释如下：</p>
<p>i) 如果inline-block的overflow设为visible（默认属性），则其baseline是当前行的containing block的baseline。</p>
<p>ii) 如果overflow设为其他，则其bottom margin位于前行的containing block的baseline；</p>
<p>我们这种情况下，inline-block元素的overlow：hidden，所以元素的底部边框在父元素的baseline。</p>
<p>因此高度才会看起来增加了。</p>
<ul>
<li>调整方法，就是为他们指定基准线,加’vertical-align:top’<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-class">.left</span>&#123;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">display</span><span class="selector-pseudo">:inline-block</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">height</span><span class="selector-pseudo">:110px</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">width</span><span class="selector-pseudo">:110px</span>;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="css"><span class="selector-class">.right</span>&#123;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">display</span><span class="selector-pseudo">:inline-block</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">height</span><span class="selector-pseudo">:110px</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">width</span><span class="selector-pseudo">:110px</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">vertical-align</span><span class="selector-pseudo">:top</span></span></span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">'container'</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"right"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="css调用系统调试盘"><a href="#css调用系统调试盘" class="headerlink" title="css调用系统调试盘"></a>css调用系统调试盘</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"shortcut icon"</span> <span class="attr">type</span>=<span class="string">"image/x-icon"</span> <span class="attr">href</span>=<span class="string">"https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"mask-icon"</span> <span class="attr">type</span>=<span class="string">""</span> <span class="attr">href</span>=<span class="string">"https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"</span> <span class="attr">color</span>=<span class="string">"#111"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>CodePen - Dynamic Image Colorizing with <span class="symbol">&amp;lt;</span>input type="color"<span class="symbol">&amp;gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">html</span>, <span class="selector-tag">body</span> &#123; <span class="attribute">height</span>: <span class="number">100%</span>; &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">body</span> &#123; <span class="attribute">margin</span>: <span class="number">0</span>; &#125;</span></span><br><span class="line">    </span><br><span class="line">    img &#123;</span><br><span class="line">        height: 100%;</span><br><span class="line">        width: 100%;</span><br><span class="line">        -o-object-fit: cover;</span><br><span class="line">           object-fit: cover;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    input &#123; </span><br><span class="line"><span class="css">        <span class="comment">/* removes default styling from input color element */</span></span></span><br><span class="line">        padding: 0;</span><br><span class="line">        border: none; </span><br><span class="line"><span class="css">        <span class="comment">/* makes input (color swatch) 100% size of container */</span></span></span><br><span class="line">        position: absolute;</span><br><span class="line">        width: 100%; </span><br><span class="line">        height: 100%;</span><br><span class="line"><span class="css">        <span class="comment">/* mix blend mode makes the color of the swatch alter the image behind it. */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">mix-blend-mode</span>: <span class="selector-tag">hue</span>; <span class="comment">/* try screen, multiply or other blend modes for different effects */</span></span></span><br><span class="line">        cursor: pointer;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line"><span class="css">    <span class="comment">/* removes default styling from input color element */</span></span></span><br><span class="line"><span class="css">    <span class="selector-pseudo">::-webkit-color-swatch</span> &#123;</span></span><br><span class="line">        border: none;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line"><span class="css">    <span class="selector-pseudo">::-webkit-color-swatch-wrapper</span> &#123;</span></span><br><span class="line">        padding: 0;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line"><span class="css">    <span class="selector-pseudo">::-moz-color-swatch</span>,</span></span><br><span class="line"><span class="css">    <span class="selector-pseudo">::-moz-focus-inner</span> &#123;</span></span><br><span class="line">        border: none;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line"><span class="css">    <span class="selector-pseudo">::-moz-focus-inner</span> &#123;</span></span><br><span class="line">        padding: 0;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line"><span class="css">    <span class="comment">/* Image Credit */</span></span></span><br><span class="line">    a &#123;</span><br><span class="line">        position: absolute;</span><br><span class="line">        bottom: 10px;</span><br><span class="line">        right: 10px;</span><br><span class="line"><span class="css">        <span class="selector-tag">color</span>: <span class="selector-id">#6B6BFF</span>;</span></span><br><span class="line">        background: black;</span><br><span class="line">        display: block;</span><br><span class="line">        padding: 0 8px 3px;</span><br><span class="line">        font-size: 15px;</span><br><span class="line">        text-decoration: none;</span><br><span class="line">    &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">window</span>.console = <span class="built_in">window</span>.console || <span class="function"><span class="keyword">function</span>(<span class="params">t</span>) </span>&#123;&#125;;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (<span class="built_in">document</span>.location.search.match(<span class="regexp">/type=embed/gi</span>)) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">window</span>.parent.postMessage(<span class="string">"resize"</span>, <span class="string">"*"</span>);</span></span><br><span class="line">      &#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span> <span class="attr">translate</span>=<span class="string">"no"</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"color"</span> <span class="attr">value</span>=<span class="string">"#0000ff"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg"</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- &lt;a href="https://www.flickr.com/photos/betabit/9284591662/" target="_blank"&gt;Photo by Jackson Faddis 🔗&lt;/a&gt; --&gt;</span></span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="句子"><a href="#句子" class="headerlink" title="句子"></a>句子</h2><p>You are the owner of your career.<br>你是你职业发展的责任人。这句话潜台词是，你（不是你老板，也不是你爸妈，也不是你女朋友）是你职业发展的责任人。</p>
<h2 id="vue的虚拟DOM"><a href="#vue的虚拟DOM" class="headerlink" title="vue的虚拟DOM"></a>vue的虚拟DOM</h2><p>Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），vdom是树状结构，<br>其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。</p>
<p>Vue 所有改变的元素都是vdom上操作，然后vue会把所有要改变的元素放到一个队列，然后通过diff算法，最终一次append到Dom</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">document</span><span class="selector-class">.getElementById</span>(<span class="string">'myId'</span>)<span class="selector-class">.appendChild</span>(myNewNode);</span><br></pre></td></tr></table></figure>

<h3 id="更新DOM是非常昂贵的操作"><a href="#更新DOM是非常昂贵的操作" class="headerlink" title="更新DOM是非常昂贵的操作"></a>更新DOM是非常昂贵的操作</h3><h3 id="为什么需要虚拟DOM？"><a href="#为什么需要虚拟DOM？" class="headerlink" title="为什么需要虚拟DOM？"></a>为什么需要虚拟DOM？</h3><p>DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。如果对前端工作进行抽象的话，主要就是维护状态和更新视图；而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性</p>
<h3 id="理解虚拟DOM"><a href="#理解虚拟DOM" class="headerlink" title="理解虚拟DOM"></a>理解虚拟DOM</h3><p>虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想<br><a href="https://blog.csdn.net/wangjie962311/article/details/72841422" target="_blank" rel="noopener">参考资料</a></p>
<h2 id="vue-v-if"><a href="#vue-v-if" class="headerlink" title="vue v-if"></a>vue v-if</h2><ul>
<li><p>v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。</p>
</li>
<li><p>v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。</p>
</li>
</ul>
<p>父组件在子组件使用v-if时，向子组件传值时，要使用异步传值，</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">add-card-slot</span> <span class="attr">v-if</span>=<span class="string">"addCardSlot.show"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">:ttsData</span>=<span class="string">"ttsData"</span></span></span><br><span class="line"><span class="tag">                        @<span class="attr">after-submit</span>=<span class="string">"afterSubmitAddCardSlot"</span></span></span><br><span class="line"><span class="tag">                        @<span class="attr">on-cancel</span>=<span class="string">"cancelAddCardSlot"</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// 可以使用 this.$nextTick 去异步传值，否则子组件在watch时是监听不到的</span></span><br><span class="line">        <span class="keyword">this</span>.$nextTick(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">this</span>.ttsData.isTts = <span class="number">0</span></span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>

<h2 id="vue-data里使用对象时的响应式原理"><a href="#vue-data里使用对象时的响应式原理" class="headerlink" title="vue data里使用对象时的响应式原理"></a>vue data里使用对象时的响应式原理</h2><p>-受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。<code>由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它</code>，这样才能让它是响应的。例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  data:&#123;</span><br><span class="line">    a:<span class="number">1</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// `vm.a` 是响应的</span></span><br><span class="line"></span><br><span class="line">vm.b = <span class="number">2</span></span><br><span class="line"><span class="comment">// `vm.b` 是非响应的</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.$<span class="keyword">set</span>(this.someObject,'b',2)</span><br><span class="line">// 是响应的</span><br><span class="line">// Vue.<span class="keyword">set</span>(vm.someObject, 'b', 2)</span><br></pre></td></tr></table></figure>

<p>-Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：</p>
<ul>
<li>有时你想向一个已有对象添加多个属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，这样添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 代替 `Object.assign(this.someObject, &#123; a: 1, b: 2 &#125;)`</span></span><br><span class="line"><span class="keyword">this</span>.someObject = <span class="built_in">Object</span>.assign(&#123;&#125;, <span class="keyword">this</span>.someObject, &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span> &#125;)</span><br></pre></td></tr></table></figure>

<h3 id="Vue-watch问题"><a href="#Vue-watch问题" class="headerlink" title="Vue-watch问题"></a>Vue-watch问题</h3><p>1.出现数组监听不到问题时的解决办法</p>
<ul>
<li>因为 Vue 不能侦测的是直接对著数组的某个索引赋值，例如 replys[1] = {}，但是你这边是对数组里面的某个元素赋值， Vue 是可以侦测到的，Vue是通过监测 get, set 来得知数据是否更新，而数组的索引是没有 get、set。<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//  先通过Object.assign()方法负值给新数组</span></span><br><span class="line">  <span class="keyword">let</span> goodsArr = <span class="built_in">Object</span>.assign([], <span class="keyword">this</span>.goodList)</span><br><span class="line">  <span class="keyword">let</span> localData = goodsArr[index].childList[j]</span><br><span class="line">  goodsArr[index].childList[j].addNum += <span class="number">1</span></span><br><span class="line">  <span class="comment">// 改变新数组的对象，然后再负值给旧数组 。z这样vue就可以监听到当前数组的变化</span></span><br><span class="line">  <span class="keyword">this</span>.goodList = goodsArr</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="声明响应式属性"><a href="#声明响应式属性" class="headerlink" title="声明响应式属性"></a>声明响应式属性</h3><h4 id="注意："><a href="#注意：" class="headerlink" title="注意："></a>注意：</h4><p>-由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  data: &#123;</span><br><span class="line">    <span class="comment">// 声明 message 为一个空值字符串</span></span><br><span class="line">    message: <span class="string">''</span></span><br><span class="line">  &#125;,</span><br><span class="line">  template: <span class="string">'&lt;div&gt;&#123;&#123; message &#125;&#125;&lt;/div&gt;'</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 之后设置 `message`</span></span><br><span class="line">vm.message = <span class="string">'Hello!'</span></span><br></pre></td></tr></table></figure>

<p>如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问的属性不存在。</p>
<p>这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例在类型检查系统的帮助下运行的更高效。而且在代码可维护性方面也有一点重要的<code>考虑</code>：<code>data 对象就像组件状态的概要，提前声明所有的响应式属性，可以让组件代码在以后重新阅读或其他开发人员阅读时更易于被理解</code>。</p>
<h2 id="iview-复选框单当单选框用，且可以取消当前的勾选"><a href="#iview-复选框单当单选框用，且可以取消当前的勾选" class="headerlink" title="iview 复选框单当单选框用，且可以取消当前的勾选"></a>iview 复选框单当单选框用，且可以取消当前的勾选</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;CheckboxGroup @on-change=<span class="string">'doLevelGroup'</span></span><br><span class="line">                       v-model=<span class="string">"levelGroup"</span>&gt;</span><br><span class="line">          &lt;Checkbox label=<span class="string">"A"</span>&gt;&lt;<span class="regexp">/Checkbox&gt;</span></span><br><span class="line"><span class="regexp">          &lt;Checkbox label="B"&gt;&lt;/</span>Checkbox&gt;</span><br><span class="line">          &lt;Checkbox label=<span class="string">"C"</span>&gt;&lt;<span class="regexp">/Checkbox&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>CheckboxGroup&gt;</span><br><span class="line"></span><br><span class="line">    doLevelGroup(data) &#123;</span><br><span class="line">      <span class="keyword">this</span>.levelGroup = data.length ? [data[data.length - <span class="number">1</span>]] : []</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>

<h3 id="Why-review-code-（为什么需要代码评审"><a href="#Why-review-code-（为什么需要代码评审" class="headerlink" title="Why review code?（为什么需要代码评审)"></a>Why review code?（为什么需要代码评审)</h3><p>A friend asked me recently why it s valuable to do code review. Most Silicon Valley tech companies, at least, do code review on every change to get at least two sets of eyes on it. At one of my earlier jobs we did opt-in code review (rarely) for a while, then a new employee coming from Google joined us and encouraged us to review all our code which we did. It was a great decision. If you do it right, code review shouldn t feel onerous. You and your reviewer aren t adversaries; you re working together to build the best software you can together. (It s important to not take feedback personall</p>
<p>最近一个朋友问我，为什么做代码评审很有价值。至少，大多数硅谷的科技公司都会对每一个变更进行代码审查，以获得至少两组关注。在我早期的一个工作中，我们做了一段时间的代码评审(很少)，然后一个来自谷歌的新员工加入了我们，并鼓励我们评审我们所做的所有代码。这是一个伟大的决定。如果你做得对，代码评审就不会觉得繁重。你和你的审稿人不是对手;你们在一起工作，共同构建最好的软件。不要把反馈当成针对个人的，这一点很重要## 缓存<br>设置浏览器缓存有下面几种方法</p>
<p>设eload 方法，该方法强迫浏res：本地缓存目录中，文件过期的时间（由服务器指定具体的时间）<br>置浏览器缓存有下面几种方法</p>
<p>Last-Modified：服务器上文件的最后修改时间</p>
<p>Etag：文件标识</p>
<p>Expires：本地缓存目录中，文件过期的时间（由服务器指定具体的时间）</p>
<p>Cache-control：本地缓存目录中，文件过期的时间（由服务器指定过期的间隔时间，由于浏览器根据间隔生成具体的时间）</p>
<h3 id="刷新浏览器的方法-1"><a href="#刷新浏览器的方法-1" class="headerlink" title="刷新浏览器的方法"></a>刷新浏览器的方法</h3><ol>
<li>r</li>
</ol>
<h3 id="酷-壳-–-COOLSHELL-陈皓"><a href="#酷-壳-–-COOLSHELL-陈皓" class="headerlink" title="酷 壳 – COOLSHELL -陈皓"></a>酷 壳 – COOLSHELL -陈皓</h3><p>“在你40岁，在父亲病重，孩子上学问题、房贷并未还清、你是全家唯一收入来源之类的中年危机的情况下，辞去你现在的工作，不加入任何一家公司，不用自己的任何一分钱积蓄，不要任何人的投资和帮助。只通过自己的技术能力，为别人解决相应的技术难题（不做任何无技术含量的外包项目），来生存养家，并除了能照顾好自己的家人没有降低自己的生活水平之外，还能再养活3个每人年薪36万元的工程师”<a href="https://coolshell.cn/articles/17972.html" target="_blank" rel="noopener">作者博客</a></p>
<p>1）软件工程师分工分得越细这个团队就越没效率，团队间的服务化是关键的关键。不管是从语言上还是从软件模块上的人员分工，越细越糟糕。服务化不是我要帮你做事，而是我让你做起事来更容易。</p>
<p>2）你总需要在一个环节上认真，这个环节越往前就越有效率，越往后你就越没效率。要么你设计和编码认真点，不然，你就得在测试上认真点。要是你设计、编码、测试都不认真，那你就得在运维上认真，就得在处理故障上认真。你总需要在一个地方认真。另外一篇文章你可以看一下——《多些时间少写些代码》</p>
<p>3）“小而精的团队”+“条件和资源受限”是效率的根本。只有团队小，内耗才会小，只有条件或资源受限，才会逼着你去用最经济的手段做最有价值的事，才会逼着你喜欢简单和简化。</p>
<p>4）技术债是不能欠的，要残酷无情地还债。很多事情，一开始不会有，那么就永远不会有。一旦一个事情烂了，后面只能跟着一起烂，烂得越多，就越没有人敢去还债。</p>
<p>5）软件架构上要松耦合，团队组织上要紧耦合。</p>
<p>6）工程师文化是关键，重视过程就是重视结果。只重视结果的KPI等同于“竭泽而渔”和“饮鸩止渴”。</p>
<h3 id="iview-form表单提交的问题"><a href="#iview-form表单提交的问题" class="headerlink" title="iview form表单提交的问题"></a>iview form表单提交的问题</h3><p> prop 的值要和 form里的key相对应</p>
<h3 id="控制光标位置"><a href="#控制光标位置" class="headerlink" title="控制光标位置"></a>控制光标位置</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!doctype <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"o_input"</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">value</span>=<span class="string">"asjdlakjsdlkajsdlalsd"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">        <span class="function"><span class="keyword">function</span> <span class="title">setTa1CursorPosition</span><span class="params">(i)</span></span>&#123;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">            <span class="keyword">var</span> oTa2 = o_input;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">            <span class="keyword">if</span>(oTa2.selectionStart||oTa2.selectionStart==<span class="number">0</span>)&#123;<span class="comment">//非IE浏览器</span></span></span><br><span class="line"></span><br><span class="line">                oTa2.selectionStart=i;</span><br><span class="line"></span><br><span class="line">                oTa2.selectionEnd=i;</span><br><span class="line"></span><br><span class="line"><span class="javascript">              <span class="built_in">console</span>.log(oTa2.selectionStart)</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">            &#125;<span class="keyword">else</span>&#123;<span class="comment">//IE</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> range = oTa2.createTextRange();</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                range.move(<span class="string">"character"</span>,i);</span></span><br><span class="line"></span><br><span class="line">                range.select();</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line"><span class="javascript">        <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> o_input=<span class="built_in">document</span>.getElementById(<span class="string">"o_input"</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">          o_input.onclick=<span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"></span><br><span class="line">            o_input.blur();</span><br><span class="line"></span><br><span class="line">            setTa1CursorPosition(2);</span><br><span class="line"></span><br><span class="line">            o_input.focus();</span><br><span class="line"></span><br><span class="line">          &#125;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="点击按钮让；input获取焦点"><a href="#点击按钮让；input获取焦点" class="headerlink" title="点击按钮让；input获取焦点"></a>点击按钮让；input获取焦点</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">          &lt;i-input type=<span class="string">"textarea"</span></span><br><span class="line">                 :autofocus=<span class="string">'isFocus'</span></span><br><span class="line">                   ref=<span class="string">'getFoucs'</span></span><br><span class="line">                   placeholder=<span class="string">"对照语音输入文字"</span></span><br><span class="line">                   :rows=<span class="string">"4"</span></span><br><span class="line">                   v-model.trim=<span class="string">"entity.content"</span></span><br><span class="line">                   :maxlength=<span class="string">"200"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.$refs[<span class="string">'getFoucs'</span>].focus()</span><br></pre></td></tr></table></figure>

<h2 id="移动端的知识"><a href="#移动端的知识" class="headerlink" title="移动端的知识"></a>移动端的知识</h2><h3 id="1、apple-mobile-web-app-capable"><a href="#1、apple-mobile-web-app-capable" class="headerlink" title="1、apple-mobile-web-app-capable"></a>1、apple-mobile-web-app-capable</h3><p>apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-capable"</span> <span class="attr">content</span>=<span class="string">"yes"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。</li>
</ul>
<h3 id="2、顶部状态栏背景色"><a href="#2、顶部状态栏背景色" class="headerlink" title="2、顶部状态栏背景色"></a>2、顶部状态栏背景色</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-status-bar-style"</span> <span class="attr">content</span>=<span class="string">"black"</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。</li>
</ul>
<p>如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。</p>
<h3 id="3、桌面图标"><a href="#3、桌面图标" class="headerlink" title="3、桌面图标"></a>3、桌面图标</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span> <span class="attr">href</span>=<span class="string">"touch-icon-iphone.png"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span> <span class="attr">sizes</span>=<span class="string">"76x76"</span> <span class="attr">href</span>=<span class="string">"touch-icon-ipad.png"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span> <span class="attr">sizes</span>=<span class="string">"120x120"</span> <span class="attr">href</span>=<span class="string">"touch-icon-iphone-retina.png"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span> <span class="attr">sizes</span>=<span class="string">"152x152"</span> <span class="attr">href</span>=<span class="string">"touch-icon-ipad-retina.png"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！ --&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- &lt;link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" /&gt; --&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)</li>
</ul>
<h3 id="4、启动画面"><a href="#4、启动画面" class="headerlink" title="4、启动画面"></a>4、启动画面</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">href</span>=<span class="string">"start.png"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>iOS下页面启动加载时显示的画面图片，避免加载时的白屏。</li>
</ul>
<p>可以通过madia来指定不同的大小</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--iPhone--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-320x460.png"</span> <span class="attr">media</span>=<span class="string">"(device-width: 320px)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> /&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- iPhone Retina --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-640x920.png"</span> <span class="attr">media</span>=<span class="string">"(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> /&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- iPhone 5 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">media</span>=<span class="string">"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-640x1096.png"</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- iPad portrait --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-768x1004.png"</span> <span class="attr">media</span>=<span class="string">"(device-width: 768px) and (orientation: portrait)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> /&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- iPad landscape --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-748x1024.png"</span> <span class="attr">media</span>=<span class="string">"(device-width: 768px) and (orientation: landscape)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> /&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- iPad Retina portrait --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-1536x2008.png"</span> <span class="attr">media</span>=<span class="string">"(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> /&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- iPad Retina landscape --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-1496x2048.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"</span><span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="移动端-HTML5-audio-autoplay-失效问题"><a href="#移动端-HTML5-audio-autoplay-失效问题" class="headerlink" title="移动端 HTML5 audio autoplay 失效问题"></a>移动端 HTML5 audio autoplay 失效问题</h3><ul>
<li>这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。</li>
</ul>
<p>解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。</p>
<p>解决代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'touchstart'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">document</span>.getElementsByTagName(<span class="string">'audio'</span>)[<span class="number">0</span>].play();</span><br><span class="line">  <span class="built_in">document</span>.getElementsByTagName(<span class="string">'audio'</span>)[<span class="number">0</span>].pause();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><a href="https://www.cnblogs.com/liulinjie/p/5663015.html" target="_blank" rel="noopener">参考文章</a></p>
<h3 id="H5-苹果手机滚动卡顿问题"><a href="#H5-苹果手机滚动卡顿问题" class="headerlink" title="H5 苹果手机滚动卡顿问题"></a>H5 苹果手机滚动卡顿问题</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> * &#123;</span><br><span class="line">    <span class="attribute">-webkit-overflow-scrolling</span>: touch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="iview-Modal用loading解决点击确定时关闭modal"><a href="#iview-Modal用loading解决点击确定时关闭modal" class="headerlink" title="iview Modal用loading解决点击确定时关闭modal"></a>iview Modal用loading解决点击确定时关闭modal</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Button</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"modal6 = true"</span>&gt;</span>Display dialog box<span class="tag">&lt;/<span class="name">Button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Modal</span></span></span><br><span class="line"><span class="tag">        <span class="attr">v-model</span>=<span class="string">"modal6"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">title</span>=<span class="string">"Title"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:loading</span>=<span class="string">"loading"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">on-ok</span>=<span class="string">"asyncOK"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>After you click ok, the dialog box will close in 2 seconds.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">Modal</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">        data () &#123;</span><br><span class="line"><span class="actionscript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="actionscript">                modal6: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">                loading: <span class="literal">true</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line">            asyncOK () &#123;</span><br><span class="line"><span class="actionscript">                <span class="keyword">this</span>.loading = <span class="literal">false</span>;</span></span><br><span class="line"><span class="javascript">          setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">this</span>.loading = <span class="literal">true</span>;</span></span><br><span class="line">          &#125;, 0);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="VUE中的name"><a href="#VUE中的name" class="headerlink" title="VUE中的name"></a>VUE中的name</h3><ol>
<li>当项目使用keep-alive时，可搭配组件name进行缓存过滤</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  name:<span class="string">'Detail'</span></span><br><span class="line">&#125;，</span><br><span class="line">mounted()&#123;</span><br><span class="line">  <span class="keyword">this</span>.getInfo();</span><br><span class="line">&#125;，</span><br><span class="line">methods:&#123;</span><br><span class="line">  getInfo()&#123;</span><br><span class="line">     axios.get(<span class="string">'/xx/detail.json'</span>,&#123;</span><br><span class="line">       params:&#123;</span><br><span class="line">        id:<span class="keyword">this</span>.$route.params.id </span><br><span class="line">       &#125;</span><br><span class="line">     &#125;).then(<span class="keyword">this</span>.getInfoSucc)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 因为我们在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求，即触发mounted函数。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//  有两个解决方案,一个增加activated()函数,每次进入新页面的时候再获取一次数据。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//  还有个方案就是在keep-alive中增加一个过滤，如下图所示</span></span><br><span class="line"><span class="comment">//  app.vue</span></span><br><span class="line">&lt;div id=<span class="string">"app"</span>&gt; </span><br><span class="line"> &lt;keep-alive exclude=<span class="string">"Detail"</span>&gt;</span><br><span class="line">  &lt;router-view/&gt;</span><br><span class="line"> &lt;<span class="regexp">/keep-alive&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>当你用vue-tools时</li>
</ol>
<p>vue-devtools调试工具里显示的组见名称是由vue中组件name决定的</p>
<h3 id="attrs"><a href="#attrs" class="headerlink" title="$attrs"></a>$attrs</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:tabindex</span>=<span class="string">"tabindex"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">v-if</span>=<span class="string">"type !== 'textarea'"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">class</span>=<span class="string">"el-input__inner"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">v-bind</span>=<span class="string">"$attrs"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:type</span>=<span class="string">"type"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:disabled</span>=<span class="string">"inputDisabled"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:readonly</span>=<span class="string">"readonly"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:autocomplete</span>=<span class="string">"autoComplete || autocomplete"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:value</span>=<span class="string">"currentValue"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">ref</span>=<span class="string">"input"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">compositionstart</span>=<span class="string">"handleComposition"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">compositionupdate</span>=<span class="string">"handleComposition"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">compositionend</span>=<span class="string">"handleComposition"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">input</span>=<span class="string">"handleInput"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">focus</span>=<span class="string">"handleFocus"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">blur</span>=<span class="string">"handleBlur"</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">change</span>=<span class="string">"handleChange"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">:aria-label</span>=<span class="string">"label"</span></span></span><br><span class="line"><span class="tag">      &gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 答案就是通过v-bind="$attrs"来实现，它将父元素所有非prop的特性都绑定在了子元素input上，否则还得在props里声明maxlength,minlength,代码量增大。</span></span><br><span class="line"><span class="comment">这就是$attrs的使用。 --&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="Vue点击子元素方法影响父元素方法"><a href="#Vue点击子元素方法影响父元素方法" class="headerlink" title="Vue点击子元素方法影响父元素方法"></a>Vue点击子元素方法影响父元素方法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">label</span> <span class="attr">class</span>=<span class="string">"ml5"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">type</span>=<span class="string">"edit"</span></span></span><br><span class="line"><span class="tag">                  @<span class="attr">click.stop.prevent</span>=<span class="string">"editBranch(item,index)"</span>&gt;</span><span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="Vue-父组件和子组件的生命周期"><a href="#Vue-父组件和子组件的生命周期" class="headerlink" title="Vue 父组件和子组件的生命周期"></a>Vue 父组件和子组件的生命周期</h3><p> 一、没有任何任何显示与隐藏限制条件的情况下:</p>
<p>1.运行的顺序依次是:</p>
<p>父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→父组件mounted;</p>
<p>二、当用v-show来控制子组件显示与隐藏的时候:</p>
<p>1.当用v-show=’show’,当show的默认值为true,执行顺序同上;</p>
<p>2.当用v-if=’show’,当show的默认值为true,执行顺序依然同上;</p>
<p>3.当用v-show=’show’,当show的默认值为false,无论在父组的生命周期(created,beforeMount)将show 变为true,执行的顺序依然如上;</p>
<p>5.当用v-show=’show’,当show的默认值为false,当在父组件的(mounted)生命周期将show变为true,执行顺序将会变为:父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→→父组件mounted→父组件beforeUpdated→父组件updated;;</p>
<p>4.当用v-if=’show’,当show的默认值为false,当在父组件的(created,beforeMount)生命周期将show变为true,执行顺序依然如上;</p>
<p>5.当用v-if=’show’,当show的默认值为false,当在父组件的(mounted)生命周期将show变为true,执行顺序将会变为:父组件created→父组件beforeMounted→父组件mounted→父组件beforeUpdated→子组件created→子组件beforeMounted→子组件mounted→父组件updated;</p>
<p>综上:1.vue项目里面在mounted以前的周期内的变化是不会触发updated的,只有在mounted才可以;</p>
<p>　　 2.希望当触发某个条件的时候再进行子组件渲染的时候,那就采用v-if吧,这也是v-if,v-show的区别之一吧;</p>
<h3 id="mounted"><a href="#mounted" class="headerlink" title="mounted"></a>mounted</h3><p>注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：</p>
<h3 id="Vue-js2-0中子组件修改父组件传递过来的props，并不影响父组件的原始数据"><a href="#Vue-js2-0中子组件修改父组件传递过来的props，并不影响父组件的原始数据" class="headerlink" title="Vue.js2.0中子组件修改父组件传递过来的props，并不影响父组件的原始数据"></a>Vue.js2.0中子组件修改父组件传递过来的props，并不影响父组件的原始数据</h3><p>vue2.0中，子组件中不能修改父组件的状态，否则在控制台中会报错。<br>但是经我测试发现，这仅限于props为非数组及对象等引用类型数据，譬如字符串，数字等<br>如果props是对象或数组的话，在子组件内修改props的话，父组件是不会报错的。<br>那么要怎么解决修改props传的值而不污染父组件的值：<br>1，可以使用ES6提供的Object.assign({}, prop)的返回值就是一个全新的对象，操作这个新对象不会影响旧对象。如果不用ES6就自己递归实现拷贝器<br>2，可以给对象重新赋值：(给对象里的每一项重新赋值)</p>
<h2 id="关于npm安装包几个问题"><a href="#关于npm安装包几个问题" class="headerlink" title="关于npm安装包几个问题"></a>关于npm安装包几个问题</h2><h3 id="npm-install-X"><a href="#npm-install-X" class="headerlink" title="npm install X:"></a>npm install X:</h3><p>会把X包安装到node_modules目录中<br>不会修改package.json<br>之后运行npm install命令时，不会自动安装X</p>
<h3 id="npm-install-X-–save"><a href="#npm-install-X-–save" class="headerlink" title="npm install X –save:"></a>npm install X –save:</h3><p>会把X包安装到node_modules目录中<br>会在package.json的dependencies属性下添加X<br>之后运行npm install命令时，会自动安装X到node_modules目录中<br>之后运行npm install –production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中</p>
<h3 id="npm-install-X-–save-dev"><a href="#npm-install-X-–save-dev" class="headerlink" title="npm install X –save-dev:"></a>npm install X –save-dev:</h3><p>会把X包安装到node_modules目录中<br>会在package.json的devDependencies属性下添加X<br>之后运行npm install命令时，会自动安装X到node_modules目录中<br>之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中</p>
<h3 id="const"><a href="#const" class="headerlink" title="const"></a>const</h3><p>const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。</p>
<p>const 无法改变指针的指向。</p>
<p>在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。</p>
<p>const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同</p>
<p>我们在javascript中有3种声明变量的方式：var,let,const；<br>其中var和let声明的是变量，而const声明的叫做常量，那我们想一个问题，我们声明一个变量后，我们不去管它，不去修改它，那它不就也是所谓意义上的常量了吗，为什么还要存在const呢？</p>
<p>解答：首先，const它有一个独特的存放值的空间，而var和let就没有，我们用const声明的常量都会放到它独有的空间里面，当我们跑代码的时候，如果我们用的是var或let声明的变量，我们电脑找一个变量的时候，就会一个一个的去找，因为javascript是单线程的，代码会从上往下依次执行，所以找起来就会很慢，但当我们用const的时候，电脑就会默认从它独有的空间里去找，就快了很多，没有去跑那些不必要跑的路。</p>
<h2 id="如何编写高性能的-JavaScript？"><a href="#如何编写高性能的-JavaScript？" class="headerlink" title="如何编写高性能的 JavaScript？"></a>如何编写高性能的 JavaScript？</h2><ul>
<li>遵循严格模式：”use strict”;</li>
<li>将 js 脚本放在页面底部，加快渲染页面</li>
<li>将 js 脚本将脚本成组打包，减少请求</li>
<li>使用非阻塞方式下载 js 脚本</li>
<li>尽量使用局部变量来保存全局变量</li>
<li>尽量减少使用闭包</li>
<li>使用 window 对象属性方法时，省略 window</li>
<li>尽量减少对象成员嵌套</li>
<li>缓存 DOM 节点的访问</li>
<li>通过避免使用 eval() 和 Function() 构造器</li>
<li>给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数</li>
<li>只要有可能尽量使用直接量创建对象和数组的字变量表达方式来消除不必要的语句</li>
<li>最小化重绘(repaint)和回流(reflow)</li>
</ul>
<h2 id="JavaScript-parseInt-函数"><a href="#JavaScript-parseInt-函数" class="headerlink" title="JavaScript parseInt() 函数"></a>JavaScript parseInt() 函数</h2><p>parseInt() 函数可解析一个字符串，并返回一个整数。</p>
<p>当参数 radix（若为数值，就是当前值的进制，比如为2，那就是按二进制解析） 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。</p>
<p>当忽略参数 radix , JavaScript 默认数字的基数如下:</p>
<p>如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。<br>如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。<br>如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。</p>
<p><code>parseInt(string, radix)</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"10"</span>) + <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"10.33"</span>) + <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"34 45 66"</span>) + <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">" 60 "</span>) + <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"40 years"</span>) + <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"He was 40"</span>) + <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"> </span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"10"</span>,<span class="number">10</span>)+ <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"010"</span>)+ <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"10"</span>,<span class="number">8</span>)+ <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"0x10"</span>)+ <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">parseInt</span>(<span class="string">"10"</span>,<span class="number">16</span>)+ <span class="string">"&lt;br&gt;"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 10</span></span><br><span class="line"><span class="comment">10</span></span><br><span class="line"><span class="comment">34</span></span><br><span class="line"><span class="comment">60</span></span><br><span class="line"><span class="comment">40</span></span><br><span class="line"><span class="comment">NaN</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">10</span></span><br><span class="line"><span class="comment">10</span></span><br><span class="line"><span class="comment">8</span></span><br><span class="line"><span class="comment">16</span></span><br><span class="line"><span class="comment">16 */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>].map(<span class="built_in">parseInt</span>) </span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">'1'</span>, <span class="number">0</span>);  <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">'2'</span>, <span class="number">1</span>);  <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">'3'</span>, <span class="number">2</span>);  <span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>

<h2 id="快速排序"><a href="#快速排序" class="headerlink" title="快速排序"></a>快速排序</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">quickSort</span>(<span class="params">arr, start, end</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (start &gt; end) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> i = start,</span><br><span class="line">        j = end,</span><br><span class="line">        pivot = arr[start]; <span class="comment">//存放基准数</span></span><br><span class="line">    <span class="keyword">while</span> (i !== j) &#123;</span><br><span class="line">        <span class="comment">// 从右边开始，找第一个小于基准的位置</span></span><br><span class="line">        <span class="keyword">while</span> (arr[j] &gt;= pivot &amp;&amp; i &lt; j) &#123;</span><br><span class="line">            j--;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 从左边开始，找第一个大于基准的位置</span></span><br><span class="line">        <span class="keyword">while</span> (arr[i] &lt;= pivot &amp;&amp; i &lt; j) &#123;</span><br><span class="line">            i++</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 交换两个数</span></span><br><span class="line">        <span class="keyword">if</span> (i &lt; j) &#123;</span><br><span class="line">            <span class="keyword">let</span> tmp = arr[i];</span><br><span class="line">            arr[i] = arr[j];</span><br><span class="line">            arr[j] = tmp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 最后把基准数归位</span></span><br><span class="line">    arr[start] = arr[i];</span><br><span class="line">    arr[i] = pivot;</span><br><span class="line">    <span class="comment">// 递归处理左边</span></span><br><span class="line">    quickSort(arr, start, i - <span class="number">1</span>);</span><br><span class="line">    <span class="comment">// 递归处理右边</span></span><br><span class="line">    quickSort(arr, i + <span class="number">1</span>, end);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">6</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">7</span>, <span class="number">9</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">10</span>, <span class="number">8</span>];</span><br><span class="line">quickSort(arr, <span class="number">0</span>, arr.length - <span class="number">1</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br></pre></td></tr></table></figure>

<h3 id="使用BEM命名规范来组织CSS代码"><a href="#使用BEM命名规范来组织CSS代码" class="headerlink" title="使用BEM命名规范来组织CSS代码"></a>使用BEM命名规范来组织CSS代码</h3><ul>
<li>BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称</li>
</ul>
<p>使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长</p>
<h2 id="js命名关于大小写规范"><a href="#js命名关于大小写规范" class="headerlink" title="js命名关于大小写规范"></a>js命名关于大小写规范</h2><p>1.常量：全部大写 NUM<br>2.变量：（1）小写+下划线<br>（2）驼峰式<br>3.方法：小写+下划线 compare_two_num<br>4.对象：驼峰式 Activity<br>5.数据库表名：小写+下划线，表名始终是复数形式的 users</p>
<h1 id="面试"><a href="#面试" class="headerlink" title="面试"></a>面试</h1><h2 id="一行代码实现数组去重？"><a href="#一行代码实现数组去重？" class="headerlink" title="一行代码实现数组去重？"></a>一行代码实现数组去重？</h2><h3 id="new-Set"><a href="#new-Set" class="headerlink" title="new Set();"></a>new Set();</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">[...new <span class="built_in">Set</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">1</span>,<span class="number">2</span>])]</span><br><span class="line"></span><br><span class="line"><span class="comment">// [1,2,3]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串去重</span></span><br><span class="line">[...new <span class="built_in">Set</span>(<span class="string">'ababbc'</span>)].join(<span class="string">''</span>)</span><br><span class="line"><span class="comment">// "abc</span></span><br></pre></td></tr></table></figure>

<h2 id="JavaScript-–-forEach不改变原数组但是改变对象属性的问题"><a href="#JavaScript-–-forEach不改变原数组但是改变对象属性的问题" class="headerlink" title="JavaScript – forEach不改变原数组但是改变对象属性的问题"></a>JavaScript – forEach不改变原数组但是改变对象属性的问题</h2><ol>
<li>forEach(item, index, arr)，三个参数，如果直接用item=xxx是无法改变原数组的，但是如果用arr[index]就可以改变原数组。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> s = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">s.forEach(<span class="function"><span class="params">item</span>=&gt;</span>&#123;</span><br><span class="line">    item = <span class="string">'a'</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(s);<span class="comment">// ["1", "2", "3", "4"] 未改变原数组</span></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">s.forEach(<span class="function">(<span class="params">item, index, arr</span>)=&gt;</span>&#123;</span><br><span class="line">    arr[index] = <span class="string">'b'</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(s);<span class="comment">// ["b", "b", "b", "b"] 改变了原数组</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>数组里面的子元素是对象，那么是可以改变对应属性的</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> s = [&#123;<span class="attr">a</span>:<span class="number">1</span>&#125;, &#123;<span class="attr">a</span>:<span class="number">1</span>&#125;];</span><br><span class="line">s.forEach(<span class="function"><span class="params">item</span>=&gt;</span>&#123;</span><br><span class="line">    item = <span class="literal">null</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(s);<span class="comment">//[&#123;a: 1&#125; ,&#123;a: 1&#125;] 未改变原数组</span></span><br><span class="line"> </span><br><span class="line">s.forEach(<span class="function"><span class="params">item</span>=&gt;</span>&#123;</span><br><span class="line">    item.a = <span class="number">666</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(s); <span class="comment">// [&#123;a: 666&#125;, &#123;a: 666&#125;] //改变的原数组里面的对象属性</span></span><br></pre></td></tr></table></figure>

<h1 id="阿里的故事"><a href="#阿里的故事" class="headerlink" title="阿里的故事"></a>阿里的故事</h1><p>阿里 P 的英文单词 是 profession ；<br>(需要专门技能，尤指需要较高教育水平的某一) 行业，职业; (某) 职业界; 业内人士; 同业; 同行; 同人; (统称，指需要较高教育水平的) 职业;</p>
<h2 id="阿里面试要求"><a href="#阿里面试要求" class="headerlink" title="阿里面试要求"></a>阿里面试要求</h2><h3 id="1、阿里云大数据前端团队（DTUX）主要负责阿里云大数据开发平台（数加）"><a href="#1、阿里云大数据前端团队（DTUX）主要负责阿里云大数据开发平台（数加）" class="headerlink" title="1、阿里云大数据前端团队（DTUX）主要负责阿里云大数据开发平台（数加）"></a>1、阿里云大数据前端团队（DTUX）主要负责阿里云大数据开发平台（数加）</h3><p>1、关注用户体验，不断改进服务的易用性；<br>2、不需要关注陈旧的浏览器的兼容性<br>3、用最前沿的前端技术与算法团队一起探索未来多种平台的前端交互方式<br>4、参与前端框架建设，并不断优化前端工具链<br>5、改进协作流程，创建技术标准和规范；<br>6、参与新人培训和前端技术布道。<br>职位要求:<br>1、2年以上开发经验，能熟练使用常见类库或框架，编写高质量的前端代码；<br>2、熟练掌握 React 、Angular 、Vue 及相关框架和技术；<br>3、熟练掌握 CSS3 、HTML5 、ES6 、Gulp 、Webpack 等规范和技术；<br>4、熟悉 Node.JS ，有 Node.JS 开发经验，熟悉 Express\Koa 等框架优先；<br>5、熟练使用 Canvas 、 SVG 、 D3.js 等可视化技术者优先；<br>6、有 WebVR 、WebGL 、Three.js 经验者优先；<br>7、有浏览器端音频、视频、图像处理经验者优先；<br>8、有前端深度优化或者大型网站开发经验者优先；<br>9、有广泛使用的开源项目优先</p>
<h3 id="2、iHome业务"><a href="#2、iHome业务" class="headerlink" title="2、iHome业务"></a>2、iHome业务</h3><p>职位要求：</p>
<ol>
<li>前端技术扎实，技术专研能力强，对新事物和技术热情高，熟悉主流的思想。</li>
<li>在工程领域，前端框架（react，vue），全栈，移动，动画等领域有一项或是多项有深入研究（不仅仅只是使用）。</li>
<li>执行力强，有良好的分析，总结能力。能够有效识别痛点，并找到有效的解决方案。</li>
<li>具备良好的团队协作精神，能利用自身技术能力提升团队整体研发效率，提高团队影响力。</li>
<li>在理解产品业务的基础上，提升产品的用户体验，技术驱动业务的发展。</li>
</ol>
<h3 id="3、前端开发专家"><a href="#3、前端开发专家" class="headerlink" title="3、前端开发专家"></a>3、前端开发专家</h3><p>岗位描述：<br>1、负责阿里巴巴集团内客户端系统的研发。<br>2、参与阿里巴巴集团内客户端框架及应用组件的规划与设计。<br>3、提升集团信息系统的整体用户体验和前端技术实力。<br>4、进行基于html5及移动互联网技术的技术论证和发展规划。<br>岗位要求：<br>1、至少3年前端开发的工作经验，有大型网站的前端架构部署和实践经验<br>2、精通至少一门非Web前端语言，对前后端合作模式有深入了解并有项目经验<br>3、善于沟通，有良好的文档写作能力，口头沟通能力，良好的团队合作精神，良好的抽象思维，理性地做出技术决策，具有风险控制意识<br>4、熟悉多种JavaScript框架及对它们适用的范围及优劣有独到见解</p>
<h3 id="4、职位描述"><a href="#4、职位描述" class="headerlink" title="4、职位描述"></a>4、职位描述</h3><p>杭州1-3年本科</p>
<p>职位描述<br>•    方向一：全栈售卖中台，参与抽象售卖的核心层、场景层、开放api层的建设<br>•    方向二：自动化营销中台，参与可视化配置营销体系、底层营销自动化配置体系建设<br>•    方向三：生态体系，参与社区、云市场、云栖大会等建设<br>•    方向四：平台架构组，参与工程化工具、框架、数据平台等建设<br>岗位要求<br>•    两年以上互联网行业前端工作经验；<br>•    基础编程知识牢靠，熟悉面向对象编程、熟悉函数式编程；<br>•    前端技术扎实，关注对新事物和技术，熟悉主流前端开发思想；<br>•    擅长 JavaScript，熟悉 ES2015，擅长 CSS，了解相关的前端生态；<br>•    擅长 React，了解 React 的核心思想，熟悉 Redux/MobX 理解它们解决的问题；<br>•    了解前端模块化，能够编写出易于维护的前端代码；<br>•    熟悉 Node.js，能够用 Node.js 编写工程工具或 Restful API<br>•    会使用 Webpack 或 Gulp 等前端构建工具实现开发流程自动化；<br>•    了解测试的重要性，熟悉测试驱动开发，熟练编写单元测试、E2E 测试；<br>•    熟练使用常用的 Git 操作，熟悉基于 Git 的常见协作规范及流程;<br>•    执行力强，有良好的分析、总结能力，能够有效识别痛点、并找到的解决方案；<br>•    良好的团队协作精神、利用自身技术能力提升团队整体研发效率；</p>
<h3 id="5、"><a href="#5、" class="headerlink" title="5、"></a>5、</h3><p>杭州1-3年本科</p>
<p>岗位要求 ：</p>
<ul>
<li>大学本科学历，2年以上开发经验，能熟练使用常见类库或框架，编写高质量的前端代码； </li>
<li>熟练掌握React、Redux及相关框架和技术，有单页面应用开发经验； </li>
<li>精通ES6，gulp，webpack等规范和技术； </li>
<li>熟悉NodeJS，有NodeJS开发经验，熟悉Express\koa等框架； </li>
<li>善于 Web 性能优化与前端效果的实现； </li>
<li>良好的团队合作精神和积极主动的沟通意识，具有很强的学习能力和对新技术的追求精神，乐于分享； </li>
<li>有大型网站开发经验者优先。</li>
<li>较强的自我管理能力，抱有积极的学习心态，乐于分享知识，喜欢沟通。<br>团队介绍<br>我们是一支极具活力、怀揣梦想的UED团队，涵盖视觉/交互设计、PC/无线/服务端开发、前端架构、用户体验等领域于一体的阿里巴巴UED团队</li>
</ul>
<p>我们专注企业级应用的UI框架研发，建设领先的前端基础设施，丰富的可视化经验积累，服务于阿里巴巴双十一大型活动的数据大屏研发</p>
<h3 id="6、"><a href="#6、" class="headerlink" title="6、"></a>6、</h3><p>杭州3-5年本科</p>
<p>职位描述<br>阿里巴巴计算平台事业部数加前端团队岗位描述：<br>阿里巴巴计算平台事业部 IDE 前端团队主要负责阿里巴巴 WebIDE(<a href="https://app.data.aliyun.com)，在这里你将接触到复杂前端应用架构，这里也给你提供了一个充分发挥技术能力的试验田；如果你有相关" target="_blank" rel="noopener">https://app.data.aliyun.com)，在这里你将接触到复杂前端应用架构，这里也给你提供了一个充分发挥技术能力的试验田；如果你有相关</a> WebIDE 开发经验、或者你对 VsCode 源码有深入的理解，欢迎您加入我们的团队！<br>1、关注用户体验，不断改进服务的易用性；<br>2、不需要关注陈旧的浏览器的兼容性；<br>3、用最前沿的前端技术与算法团队一起探索未来多种平台的前端交互方式；<br>4、参与前端框架建设，并不断优化前端工具链；<br>5、改进协作流程，创建技术标准和规范；<br>6、参与新人培训和前端技术布道；<br>岗位要求：<br>1、3年以上开发经验，能熟练使用常见类库或框架，编写高质量的前端代码；<br>2、熟练掌握 React 、Angular 、Vue 及相关框架和技术；<br>3、熟练掌握 CSS3 、HTML5 、ES6 、Gulp、Webpack 等规范和技术；<br>4、熟悉 Node.JS ，有 Node.JS 开发经验，熟悉 Express\Koa 等框架优先；<br>5、熟练使用 Canvas 、 SVG 、 D3.js 等可视化技术者优先；<br>6、有 WebVR 、WebGL 、Three.js 经验者优先；<br>7、有浏览器端音频、视频、图像处理经验者优先；<br>8、有前端深度优化或者大型网站开发经验者优先；<br>9、有广泛使用的开源项目优先；<br>10、有 WebIDE 相关工作经验优先；<br>11、了解 VsCode 源码优先；</p>

    

    

    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <strong>本文作者：</strong>
          Littleki
        </li>
        <li>
          <strong>本文链接：</strong>
          <a href="https:/littleki.gitee.io/2019/04/25/随手笔记/" title="随手笔记"
            target="_blank">https:/littleki.gitee.io/2019/04/25/随手笔记/</a>
        </li>
        
        <li>
          <strong>版权声明： </strong>
          
          本博客所有文章除特别声明外，均采用 <a href="https://github.com/JoeyBling/hexo-theme-yilia-plus/blob/master/LICENSE" rel="external nofollow" target="_blank">MIT</a> 许可协议。转载请注明出处！
        </li>
        
      </ul>
    </div>
    

  </div>
  <div class="article-info article-info-index">
    
    <div class="article-pop-out tagcloud">
      <i class="icon-tuding"></i>
      <a class="article-tag-list-link color3">置顶</a>
    </div>
    
    
	<div class="article-tag tagcloud">
		<i class="icon-price-tags icon"></i>
		<ul class="article-tag-list">
			 
        		<li class="article-tag-list-item">
        			<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">浏览器</a>
        		</li>
      		 
        		<li class="article-tag-list-item">
        			<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">随手笔记</a>
        		</li>
      		 
        		<li class="article-tag-list-item">
        			<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">平时遇到的问题</a>
        		</li>
      		
		</ul>
	</div>

    

    

    
    
<div class="share-btn share-icons tooltip-left">
  <div class="tooltip tooltip-east">
    <span class="tooltip-item">
      <a href="javascript:;" class="share-sns share-outer">
        <i class="icon icon-share"></i>
      </a>
    </span>
    <span class="tooltip-content">
      <div class="share-wrap">
        <div class="share-icons">
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="icon icon-weibo"></i>
          </a>
          <!-- <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="icon icon-weixin"></i>
          </a> -->
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="icon icon-qq"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="icon icon-douban"></i>
          </a>
          <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a>
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="icon icon-facebook"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="icon icon-twitter"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="icon icon-google"></i>
          </a>
        </div>
      </div>
    </span>
  </div>
</div>

<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
     <!-- <img src="//pan.baidu.com/share/qrcode?url=https://littleki.gitee.io/2019/04/25/随手笔记/" alt="微信分享二维码"> -->
    </div>
</div>

<div class="mask js-mask"></div>

    
    <div class="clearfix"></div>
  </div>
  </div>
</article>


<nav id="article-nav">
  
    <a href="/2019/06/02/markDown语法/" id="article-nav-newer" class="article-nav-link-wrap">
      <i class="icon-circle-left"></i>
      <div class="article-nav-title">
        
          markDown语法
        
      </div>
    </a>
  
  
    <a href="/2019/01/31/年度总结/迟来的2018年度总结/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">迟来的2018年度总结</div>
      <i class="icon-circle-right"></i>
    </a>
  
</nav>


<aside class="wrap-side-operation">
    <div class="mod-side-operation">
        
        <div class="jump-container" id="js-jump-container" style="display:none;">
            <a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
                <i class="icon-font icon-back"></i>
            </a>
            <div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
                <i class="icon-font icon-plane jump-plane"></i>
            </div>
        </div>
        
        
        <div class="toc-container tooltip-left">
            <i class="icon-font icon-category"></i>
            <div class="tooltip tooltip-east">
                <span class="tooltip-item">
                </span>
                <span class="tooltip-content">
                    <div class="toc-article">
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#可以用-DevTools-的-queryObjects-函数测试是否有内存泄漏"><span class="toc-number">1.</span> <span class="toc-text">可以用 DevTools 的 queryObjects()函数测试是否有内存泄漏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#githooks-钩子没有被触发的原因"><span class="toc-number">2.</span> <span class="toc-text">githooks 钩子没有被触发的原因</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#git-hooks-里sample文件-的作用"><span class="toc-number">2.1.</span> <span class="toc-text">.git hooks 里sample文件 的作用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#怎么写出优质的-JavaScript-代码"><span class="toc-number">3.</span> <span class="toc-text">怎么写出优质的 JavaScript 代码?</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#指数幂"><span class="toc-number">3.1.</span> <span class="toc-text">指数幂</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数字分隔符"><span class="toc-number">3.2.</span> <span class="toc-text">数字分隔符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用方法链（尤其是类）"><span class="toc-number">3.3.</span> <span class="toc-text">使用方法链（尤其是类）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#代码可维护性、可复用性和可扩展性的区别"><span class="toc-number">4.</span> <span class="toc-text">代码可维护性、可复用性和可扩展性的区别</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#可维护性"><span class="toc-number">4.0.1.</span> <span class="toc-text">可维护性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#可扩展性"><span class="toc-number">4.0.2.</span> <span class="toc-text">可扩展性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#一、变量"><span class="toc-number">4.0.3.</span> <span class="toc-text">一、变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#二、函数"><span class="toc-number">4.0.4.</span> <span class="toc-text">二、函数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#用枚举来约定变量的使用与赋值"><span class="toc-number">4.1.</span> <span class="toc-text">用枚举来约定变量的使用与赋值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#every"><span class="toc-number">4.2.</span> <span class="toc-text">every</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Husky钩子在SourceTree中报错：-husky-pre-commit-Line-4-npm-command-not-found"><span class="toc-number">4.3.</span> <span class="toc-text">Husky钩子在SourceTree中报错：.husky/pre-commit: Line 4 npm: command not found</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#解决方法"><span class="toc-number">4.3.1.</span> <span class="toc-text">解决方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#参考文献"><span class="toc-number">4.3.2.</span> <span class="toc-text">参考文献</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#TDD-驱动测试开发"><span class="toc-number">4.4.</span> <span class="toc-text">TDD 驱动测试开发</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mac-使用code命令打开VSCode"><span class="toc-number">4.5.</span> <span class="toc-text">mac 使用code命令打开VSCode</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#工程化方面"><span class="toc-number">4.6.</span> <span class="toc-text">工程化方面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#页面载入进度条"><span class="toc-number">4.7.</span> <span class="toc-text">页面载入进度条</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vite"><span class="toc-number">4.8.</span> <span class="toc-text">vite</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#是因为很多你想做的项目，要么在GitHub上已经有了，要么已经在文档中被人讨论过了，那为什么是你做？为什么你更有可能去做成？"><span class="toc-number">4.9.</span> <span class="toc-text">是因为很多你想做的项目，要么在GitHub上已经有了，要么已经在文档中被人讨论过了，那为什么是你做？为什么你更有可能去做成？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#可选链-，空值合并运算符"><span class="toc-number">4.10.</span> <span class="toc-text">可选链?. ，空值合并运算符??</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#动画卡顿分析"><span class="toc-number">4.11.</span> <span class="toc-text">动画卡顿分析</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#动画卡顿的原因"><span class="toc-number">4.11.1.</span> <span class="toc-text">动画卡顿的原因</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#优化方法"><span class="toc-number">4.11.2.</span> <span class="toc-text">优化方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#requestAnimationFrame"><span class="toc-number">4.11.3.</span> <span class="toc-text">requestAnimationFrame</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#优化方法-1"><span class="toc-number">4.11.4.</span> <span class="toc-text">优化方法</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#querySelector和getElementById性能分析与使用选择"><span class="toc-number">4.12.</span> <span class="toc-text">querySelector和getElementById性能分析与使用选择</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#URLSearchParams"><span class="toc-number">5.</span> <span class="toc-text">URLSearchParams</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-cli3-单独打包库"><span class="toc-number">6.</span> <span class="toc-text">vue-cli3 单独打包库</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-Sass-could-not-find-a-binding-for-your-current-environment-OS-X-64-bit-with-Node-js-6-x"><span class="toc-number">7.</span> <span class="toc-text">Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 6.x</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在-Mac-下安装-Node-与-NPM"><span class="toc-number">8.</span> <span class="toc-text">在 Mac 下安装 Node 与 NPM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装-Node"><span class="toc-number">8.1.</span> <span class="toc-text">安装 Node</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#安装-NPM"><span class="toc-number">8.2.</span> <span class="toc-text">安装 NPM</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#安装-Node-1"><span class="toc-number">8.3.</span> <span class="toc-text">安装 Node</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#params动态路由传参"><span class="toc-number">9.</span> <span class="toc-text">params动态路由传参</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在引用子组件里的-click-方法不生效"><span class="toc-number">10.</span> <span class="toc-text">在引用子组件里的 click 方法不生效</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#commit-lint"><span class="toc-number">11.</span> <span class="toc-text">commit-lint</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-变量教程"><span class="toc-number">12.</span> <span class="toc-text">CSS 变量教程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#一、变量的声明"><span class="toc-number">12.1.</span> <span class="toc-text">一、变量的声明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三、作用域"><span class="toc-number">12.2.</span> <span class="toc-text">三、作用域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript-也可以检测浏览器是否支持-CSS-变量。"><span class="toc-number">12.3.</span> <span class="toc-text">JavaScript 也可以检测浏览器是否支持 CSS 变量。</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Proxy函数"><span class="toc-number">13.</span> <span class="toc-text">Proxy函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Proxy的优势如下"><span class="toc-number">13.1.</span> <span class="toc-text">Proxy的优势如下</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-defineProperty-的优势如下"><span class="toc-number">13.2.</span> <span class="toc-text">Object.defineProperty 的优势如下</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3-源码大多是高阶函数，-做了类似柯里话函数"><span class="toc-number">14.</span> <span class="toc-text">vue3 源码大多是高阶函数， 做了类似柯里话函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3-stup-为什么比mixin好用"><span class="toc-number">15.</span> <span class="toc-text">vue3 stup 为什么比mixin好用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vscode-代码片段"><span class="toc-number">16.</span> <span class="toc-text">vscode 代码片段</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CI-CD是什么？"><span class="toc-number">17.</span> <span class="toc-text">CI/CD是什么？</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#DevOps"><span class="toc-number">17.1.</span> <span class="toc-text">DevOps</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React"><span class="toc-number">18.</span> <span class="toc-text">React</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#react的setState到底是同步还是异步？"><span class="toc-number">18.1.</span> <span class="toc-text">react的setState到底是同步还是异步？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Block-formatting-context-BFC"><span class="toc-number">19.</span> <span class="toc-text">Block formatting context(BFC)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#BFC能解决什么问题"><span class="toc-number">19.1.</span> <span class="toc-text">BFC能解决什么问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HMR-模块热替换"><span class="toc-number">19.2.</span> <span class="toc-text">HMR(模块热替换)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#我从-Vuejs-中学到了什么"><span class="toc-number">20.</span> <span class="toc-text">我从 Vuejs 中学到了什么</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#框架要做到良好的-Tree-Shaking"><span class="toc-number">20.1.</span> <span class="toc-text">框架要做到良好的 Tree-Shaking</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#VUE-OPTIONS-API-作用"><span class="toc-number">20.1.1.</span> <span class="toc-text">VUE_OPTIONS_API 作用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用-TS-的好处很多"><span class="toc-number">20.2.</span> <span class="toc-text">使用 TS 的好处很多</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webpack"><span class="toc-number">21.</span> <span class="toc-text">webpack</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#devtool"><span class="toc-number">21.1.</span> <span class="toc-text">devtool</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Warning-callback-is-deprecated-Please-return-a-promise-instead"><span class="toc-number">22.</span> <span class="toc-text">Warning: callback is deprecated. Please return a promise instead.</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Observer（观察者模式）"><span class="toc-number">23.</span> <span class="toc-text">Observer（观察者模式）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#举例子"><span class="toc-number">23.1.</span> <span class="toc-text">举例子</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#对象与视图双向绑定"><span class="toc-number">23.1.1.</span> <span class="toc-text">对象与视图双向绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#拍卖"><span class="toc-number">23.1.2.</span> <span class="toc-text">拍卖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#使用网页端-“vscode”阅读Github的源码"><span class="toc-number">23.1.3.</span> <span class="toc-text">使用网页端 “vscode”阅读Github的源码</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#source-tree-pull、push需要输入密码"><span class="toc-number">24.</span> <span class="toc-text">source tree pull、push需要输入密码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#打开Mac终端，以下命令："><span class="toc-number">24.1.</span> <span class="toc-text">打开Mac终端，以下命令：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue3-ts"><span class="toc-number">25.</span> <span class="toc-text">Vue3 +ts</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#在Vue3-TS项目的script中用this访问变量报错Property-‘xxx-变量-’-does-not-exist-on-type-‘-…-vue的组件内容-’"><span class="toc-number">25.1.</span> <span class="toc-text">在Vue3+TS项目的script中用this访问变量报错Property ‘xxx(变量)’ does not exist on type ‘ …(vue的组件内容)’</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TCP协议"><span class="toc-number">26.</span> <span class="toc-text">TCP协议</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#antd-自定义主题功能使用报错-bezierEasingMixin-Inline-JavaScript-is-not-enabled-Is-it-set-in-your-options"><span class="toc-number">27.</span> <span class="toc-text">antd 自定义主题功能使用报错 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#css控制滚动条的样式，大小，颜色"><span class="toc-number">28.</span> <span class="toc-text">css控制滚动条的样式，大小，颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue项目全局引用sass变量文件报错的解决办法"><span class="toc-number">29.</span> <span class="toc-text">Vue项目全局引用sass变量文件报错的解决办法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vscode-快速跳转"><span class="toc-number">30.</span> <span class="toc-text">vscode 快速跳转</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Visual-studio-Code-跳转定义返回快捷键"><span class="toc-number">30.1.</span> <span class="toc-text">Visual studio Code 跳转定义返回快捷键</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Windows"><span class="toc-number">30.1.1.</span> <span class="toc-text">Windows</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Mac"><span class="toc-number">30.1.2.</span> <span class="toc-text">Mac</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vscode-路径提示"><span class="toc-number">30.2.</span> <span class="toc-text">vscode @ 路径提示</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-2-x-使用-ts"><span class="toc-number">31.</span> <span class="toc-text">vue 2.x 使用 ts</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#特殊运算符"><span class="toc-number">32.</span> <span class="toc-text">特殊运算符 ~~</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#这里还有一个需要注意的小知识点：不需要-px-转-rem-的情况，可以使用大写的-PX-作为单位。"><span class="toc-number">33.</span> <span class="toc-text">这里还有一个需要注意的小知识点：不需要 px 转 rem 的情况，可以使用大写的 PX 作为单位。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dependencies-与-devDependencies的区别"><span class="toc-number">34.</span> <span class="toc-text">dependencies 与 devDependencies的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#typescript"><span class="toc-number">35.</span> <span class="toc-text">typescript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对象解构"><span class="toc-number">36.</span> <span class="toc-text">对象解构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-debug-模式"><span class="toc-number">37.</span> <span class="toc-text">vue debug 模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#提升效率的案例"><span class="toc-number">38.</span> <span class="toc-text">提升效率的案例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES11-Promise-allSettled-和-Promise-all-的差别"><span class="toc-number">39.</span> <span class="toc-text">ES11 Promise.allSettled([]) 和 Promise.all([]) 的差别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#异步（Promise）环境下错误处理方式"><span class="toc-number">40.</span> <span class="toc-text">异步（Promise）环境下错误处理方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#AOP-模式"><span class="toc-number">41.</span> <span class="toc-text">AOP 模式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#aop-是什么"><span class="toc-number">41.1.</span> <span class="toc-text">aop 是什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#aop有什么优势"><span class="toc-number">41.2.</span> <span class="toc-text">aop有什么优势</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js调用轮询接口"><span class="toc-number">42.</span> <span class="toc-text">js调用轮询接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#随手鸡汤"><span class="toc-number">43.</span> <span class="toc-text">随手鸡汤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#判断基本类型"><span class="toc-number">44.</span> <span class="toc-text">判断基本类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#git-问题"><span class="toc-number">44.1.</span> <span class="toc-text">git 问题</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue-webpack-bundle-analyzer打包体积优化，详细分布查看插件"><span class="toc-number">45.</span> <span class="toc-text">Vue webpack-bundle-analyzer打包体积优化，详细分布查看插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ssh登录-The-authenticity-of-host-192-168-0-xxx-can’t-be-established-的问题"><span class="toc-number">46.</span> <span class="toc-text">ssh登录　The authenticity of host 192.168.0.xxx can’t be established.　的问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#你认为程序员从幼稚到成熟的过程是什么？"><span class="toc-number">47.</span> <span class="toc-text">你认为程序员从幼稚到成熟的过程是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#element-ui的popover组件位置偏移"><span class="toc-number">48.</span> <span class="toc-text">element-ui的popover组件位置偏移</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1、统一给popver固定的高度"><span class="toc-number">48.1.</span> <span class="toc-text">1、统一给popver固定的高度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2、boundariesElement真的很重要，记住一定要设置为viewport"><span class="toc-number">48.2.</span> <span class="toc-text">2、boundariesElement真的很重要，记住一定要设置为viewport</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#el-table-设置-fixed-’right’"><span class="toc-number">48.3.</span> <span class="toc-text">el-table 设置 fixed=’right’</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#运行vue报错There-are-multiple-modules-with-names-that-only-differ-in-casing"><span class="toc-number">49.</span> <span class="toc-text">运行vue报错There are multiple modules with names that only differ in casing.</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#数字数组转化为字符串数组或Number-数组"><span class="toc-number">50.</span> <span class="toc-text">数字数组转化为字符串数组或Number 数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#数字数组转化为字符串数组"><span class="toc-number">50.1.</span> <span class="toc-text">数字数组转化为字符串数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串数组转化为数字数组"><span class="toc-number">50.2.</span> <span class="toc-text">字符串数组转化为数字数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#文件预览或下载中，axios设置responseType-blob时对于后台报错信息的捕获兼容"><span class="toc-number">51.</span> <span class="toc-text">文件预览或下载中，axios设置responseType:blob时对于后台报错信息的捕获兼容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#样式穿透"><span class="toc-number">52.</span> <span class="toc-text">样式穿透</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#百度地图"><span class="toc-number">53.</span> <span class="toc-text">百度地图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#es6提供了一个新的方法用于判断某个变量是否是整数"><span class="toc-number">54.</span> <span class="toc-text">es6提供了一个新的方法用于判断某个变量是否是整数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#函数防抖和节流的概念和真实项目中的应用场景"><span class="toc-number">55.</span> <span class="toc-text">函数防抖和节流的概念和真实项目中的应用场景</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#函数防抖-debounce-："><span class="toc-number">55.1.</span> <span class="toc-text">函数防抖(debounce)：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#举个例子–页面滚动"><span class="toc-number">55.1.1.</span> <span class="toc-text">举个例子–页面滚动</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实际的应用"><span class="toc-number">55.2.</span> <span class="toc-text">实际的应用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#函数节流-throttle-："><span class="toc-number">55.3.</span> <span class="toc-text">函数节流(throttle)：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实际的应用-1"><span class="toc-number">55.4.</span> <span class="toc-text">实际的应用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#其他应用场景举例"><span class="toc-number">55.5.</span> <span class="toc-text">其他应用场景举例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#图片懒加载"><span class="toc-number">56.</span> <span class="toc-text">图片懒加载</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#或者用获取图片的可视高度-getBoundingClientRect"><span class="toc-number">56.1.</span> <span class="toc-text">或者用获取图片的可视高度  getBoundingClientRect</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-性能优化"><span class="toc-number">57.</span> <span class="toc-text">vue 性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue-用的算法是找-最长递增子序列，而非-最长递增连续子序列，因为连续子序列不一定是最优解"><span class="toc-number">57.1.</span> <span class="toc-text">vue 用的算法是找 最长递增子序列，而非 最长递增连续子序列，因为连续子序列不一定是最优解</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#数组求最大值"><span class="toc-number">57.1.1.</span> <span class="toc-text">数组求最大值</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for-遍历必须为-item-添加-key，且避免同时使用-v-if"><span class="toc-number">57.2.</span> <span class="toc-text">v-for 遍历必须为 item 添加 key，且避免同时使用 v-if</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件的销毁"><span class="toc-number">57.3.</span> <span class="toc-text">事件的销毁</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第三方插件的按需引入"><span class="toc-number">57.4.</span> <span class="toc-text">第三方插件的按需引入</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Webpack-对图片进行压缩"><span class="toc-number">57.4.1.</span> <span class="toc-text">Webpack 对图片进行压缩</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关于vue项目在build出现的问题"><span class="toc-number">58.</span> <span class="toc-text">关于vue项目在build出现的问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#keep-alive的正确使用"><span class="toc-number">58.1.</span> <span class="toc-text">keep-alive的正确使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#组件按需加载"><span class="toc-number">58.2.</span> <span class="toc-text">组件按需加载</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#使用-CDN-外部加载资源"><span class="toc-number">58.2.1.</span> <span class="toc-text">使用 CDN 外部加载资源</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#尤大大聊-vue3-0-BETA"><span class="toc-number">59.</span> <span class="toc-text">尤大大聊 vue3.0-BETA</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#重排和重绘"><span class="toc-number">60.</span> <span class="toc-text">重排和重绘</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#重排（Relayout-Reflow）"><span class="toc-number">60.1.</span> <span class="toc-text">重排（Relayout/Reflow）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#减少重排"><span class="toc-number">60.2.</span> <span class="toc-text">减少重排</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css及动画处理"><span class="toc-number">60.3.</span> <span class="toc-text">css及动画处理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#为什么在foreach要抛异常才能停止"><span class="toc-number">61.</span> <span class="toc-text">为什么在foreach要抛异常才能停止</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#localstorage玩法"><span class="toc-number">62.</span> <span class="toc-text">localstorage玩法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#如何让-localStorage-实现和-cookie-一样的自动过期功能？"><span class="toc-number">62.1.</span> <span class="toc-text">如何让 localStorage 实现和 cookie 一样的自动过期功能？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#null和undefined的区别"><span class="toc-number">63.</span> <span class="toc-text">null和undefined的区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined表示缺少值，即此处应该有值，但没有定义"><span class="toc-number">63.1.</span> <span class="toc-text">undefined表示缺少值，即此处应该有值，但没有定义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#null和undefined转换成number数据类型"><span class="toc-number">63.2.</span> <span class="toc-text">null和undefined转换成number数据类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对接扫码抢或者类似pos机出现拿到付款码没有支付的解决办法"><span class="toc-number">64.</span> <span class="toc-text">对接扫码抢或者类似pos机出现拿到付款码没有支付的解决办法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#面向对象编程和面向接口编程"><span class="toc-number">65.</span> <span class="toc-text">面向对象编程和面向接口编程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-什么是面向接口编程"><span class="toc-number">65.1.</span> <span class="toc-text">1.什么是面向接口编程?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-什么是面向对象编程"><span class="toc-number">65.2.</span> <span class="toc-text">2.什么是面向对象编程</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#什么是封装？"><span class="toc-number">65.2.1.</span> <span class="toc-text">什么是封装？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#什么是继承？"><span class="toc-number">65.2.2.</span> <span class="toc-text">什么是继承？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#什么是多态？"><span class="toc-number">65.2.3.</span> <span class="toc-text">什么是多态？</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-面向接口编程与面向对象开发的区别"><span class="toc-number">65.3.</span> <span class="toc-text">3.面向接口编程与面向对象开发的区别:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-面向接口编程的好处"><span class="toc-number">65.4.</span> <span class="toc-text">4.面向接口编程的好处</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#将对象的属性值保存为局部变量"><span class="toc-number">66.</span> <span class="toc-text">将对象的属性值保存为局部变量</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#H5直接唤起照相机"><span class="toc-number">67.</span> <span class="toc-text">H5直接唤起照相机</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6"><span class="toc-number">68.</span> <span class="toc-text">ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#super"><span class="toc-number">68.1.</span> <span class="toc-text">super</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#addEventListener-与removeEventListener"><span class="toc-number">69.</span> <span class="toc-text">addEventListener()与removeEventListener()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#让video标签铺满div"><span class="toc-number">70.</span> <span class="toc-text">让video标签铺满div</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#缓存"><span class="toc-number">71.</span> <span class="toc-text">缓存</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#设置浏览器缓存有下面几种方法"><span class="toc-number">71.1.</span> <span class="toc-text">设置浏览器缓存有下面几种方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#刷新浏览器的方法"><span class="toc-number">71.2.</span> <span class="toc-text">刷新浏览器的方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#number不能设置为属性"><span class="toc-number">72.</span> <span class="toc-text">number不能设置为属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#iview-Table默认选中方法"><span class="toc-number">73.</span> <span class="toc-text">iview Table默认选中方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#封装findIndex"><span class="toc-number">74.</span> <span class="toc-text">封装findIndex</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE-v-model"><span class="toc-number">75.</span> <span class="toc-text">VUE v-model</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#scoped样式穿透"><span class="toc-number">75.1.</span> <span class="toc-text">scoped样式穿透</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对象的复制"><span class="toc-number">76.</span> <span class="toc-text">对象的复制</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#浅复制"><span class="toc-number">76.1.</span> <span class="toc-text">浅复制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#深复制"><span class="toc-number">76.2.</span> <span class="toc-text">深复制</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#css总结"><span class="toc-number">77.</span> <span class="toc-text">css总结</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#解决移动端1px的问题"><span class="toc-number">77.1.</span> <span class="toc-text">解决移动端1px的问题</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#一、transform-scale"><span class="toc-number">77.1.1.</span> <span class="toc-text">一、transform:scale</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#二、viewport"><span class="toc-number">77.1.2.</span> <span class="toc-text">二、viewport</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用display：inline-block，出现元素高度错位"><span class="toc-number">77.2.</span> <span class="toc-text">使用display：inline-block，出现元素高度错位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css调用系统调试盘"><span class="toc-number">77.3.</span> <span class="toc-text">css调用系统调试盘</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#句子"><span class="toc-number">78.</span> <span class="toc-text">句子</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue的虚拟DOM"><span class="toc-number">79.</span> <span class="toc-text">vue的虚拟DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#更新DOM是非常昂贵的操作"><span class="toc-number">79.1.</span> <span class="toc-text">更新DOM是非常昂贵的操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#为什么需要虚拟DOM？"><span class="toc-number">79.2.</span> <span class="toc-text">为什么需要虚拟DOM？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#理解虚拟DOM"><span class="toc-number">79.3.</span> <span class="toc-text">理解虚拟DOM</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-v-if"><span class="toc-number">80.</span> <span class="toc-text">vue v-if</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-data里使用对象时的响应式原理"><span class="toc-number">81.</span> <span class="toc-text">vue data里使用对象时的响应式原理</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-watch问题"><span class="toc-number">81.1.</span> <span class="toc-text">Vue-watch问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#声明响应式属性"><span class="toc-number">81.2.</span> <span class="toc-text">声明响应式属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#注意："><span class="toc-number">81.2.1.</span> <span class="toc-text">注意：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#iview-复选框单当单选框用，且可以取消当前的勾选"><span class="toc-number">82.</span> <span class="toc-text">iview 复选框单当单选框用，且可以取消当前的勾选</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Why-review-code-（为什么需要代码评审"><span class="toc-number">82.1.</span> <span class="toc-text">Why review code?（为什么需要代码评审)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#刷新浏览器的方法-1"><span class="toc-number">82.2.</span> <span class="toc-text">刷新浏览器的方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#酷-壳-–-COOLSHELL-陈皓"><span class="toc-number">82.3.</span> <span class="toc-text">酷 壳 – COOLSHELL -陈皓</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#iview-form表单提交的问题"><span class="toc-number">82.4.</span> <span class="toc-text">iview form表单提交的问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#控制光标位置"><span class="toc-number">82.5.</span> <span class="toc-text">控制光标位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#点击按钮让；input获取焦点"><span class="toc-number">82.6.</span> <span class="toc-text">点击按钮让；input获取焦点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#移动端的知识"><span class="toc-number">83.</span> <span class="toc-text">移动端的知识</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1、apple-mobile-web-app-capable"><span class="toc-number">83.1.</span> <span class="toc-text">1、apple-mobile-web-app-capable</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2、顶部状态栏背景色"><span class="toc-number">83.2.</span> <span class="toc-text">2、顶部状态栏背景色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3、桌面图标"><span class="toc-number">83.3.</span> <span class="toc-text">3、桌面图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4、启动画面"><span class="toc-number">83.4.</span> <span class="toc-text">4、启动画面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#移动端-HTML5-audio-autoplay-失效问题"><span class="toc-number">83.5.</span> <span class="toc-text">移动端 HTML5 audio autoplay 失效问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#H5-苹果手机滚动卡顿问题"><span class="toc-number">83.6.</span> <span class="toc-text">H5 苹果手机滚动卡顿问题</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#iview-Modal用loading解决点击确定时关闭modal"><span class="toc-number">84.</span> <span class="toc-text">iview Modal用loading解决点击确定时关闭modal</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#VUE中的name"><span class="toc-number">84.1.</span> <span class="toc-text">VUE中的name</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#attrs"><span class="toc-number">84.2.</span> <span class="toc-text">$attrs</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue点击子元素方法影响父元素方法"><span class="toc-number">84.3.</span> <span class="toc-text">Vue点击子元素方法影响父元素方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-父组件和子组件的生命周期"><span class="toc-number">84.4.</span> <span class="toc-text">Vue 父组件和子组件的生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mounted"><span class="toc-number">84.5.</span> <span class="toc-text">mounted</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-js2-0中子组件修改父组件传递过来的props，并不影响父组件的原始数据"><span class="toc-number">84.6.</span> <span class="toc-text">Vue.js2.0中子组件修改父组件传递过来的props，并不影响父组件的原始数据</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关于npm安装包几个问题"><span class="toc-number">85.</span> <span class="toc-text">关于npm安装包几个问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-install-X"><span class="toc-number">85.1.</span> <span class="toc-text">npm install X:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-install-X-–save"><span class="toc-number">85.2.</span> <span class="toc-text">npm install X –save:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-install-X-–save-dev"><span class="toc-number">85.3.</span> <span class="toc-text">npm install X –save-dev:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#const"><span class="toc-number">85.4.</span> <span class="toc-text">const</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何编写高性能的-JavaScript？"><span class="toc-number">86.</span> <span class="toc-text">如何编写高性能的 JavaScript？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-parseInt-函数"><span class="toc-number">87.</span> <span class="toc-text">JavaScript parseInt() 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#快速排序"><span class="toc-number">88.</span> <span class="toc-text">快速排序</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#使用BEM命名规范来组织CSS代码"><span class="toc-number">88.1.</span> <span class="toc-text">使用BEM命名规范来组织CSS代码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js命名关于大小写规范"><span class="toc-number">89.</span> <span class="toc-text">js命名关于大小写规范</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#面试"><span class="toc-number"></span> <span class="toc-text">面试</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#一行代码实现数组去重？"><span class="toc-number">1.</span> <span class="toc-text">一行代码实现数组去重？</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#new-Set"><span class="toc-number">1.1.</span> <span class="toc-text">new Set();</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-–-forEach不改变原数组但是改变对象属性的问题"><span class="toc-number">2.</span> <span class="toc-text">JavaScript – forEach不改变原数组但是改变对象属性的问题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#阿里的故事"><span class="toc-number"></span> <span class="toc-text">阿里的故事</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#阿里面试要求"><span class="toc-number">1.</span> <span class="toc-text">阿里面试要求</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1、阿里云大数据前端团队（DTUX）主要负责阿里云大数据开发平台（数加）"><span class="toc-number">1.1.</span> <span class="toc-text">1、阿里云大数据前端团队（DTUX）主要负责阿里云大数据开发平台（数加）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2、iHome业务"><span class="toc-number">1.2.</span> <span class="toc-text">2、iHome业务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3、前端开发专家"><span class="toc-number">1.3.</span> <span class="toc-text">3、前端开发专家</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4、职位描述"><span class="toc-number">1.4.</span> <span class="toc-text">4、职位描述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5、"><span class="toc-number">1.5.</span> <span class="toc-text">5、</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6、"><span class="toc-number">1.6.</span> <span class="toc-text">6、</span></a></li></ol></li></ol>
                    </div>
                </span>
            </div>
        </div>
        
    </div>
</aside>














          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2017-2022 <a href="https:/littleki.gitee.io/" target="_blank">Littleki</a>
    	</div>
      	<div class="footer-right">
			
			
      		GitHub:<a href="https://github.com/JoeyBling/hexo-theme-yilia-plus" target="_blank">hexo-theme-yilia-plus</a> by Litten
      	</div>
    </div>
  </div>
  
  
	<script src="/lib/busuanzi.pure.js"></script>
	
  
  
	
	<span id="busuanzi_container_site_pv" style="display:none">
		本站总访问量<span id="busuanzi_value_site_pv"></span>次	
	        <span class="post-meta-divider" >|</span>
	</span>
  	<span id="busuanzi_container_site_uv" style='display:none'>
  		本站访客数<span id="busuanzi_value_site_uv"></span>人
  	</span>
  
</footer>

    </div>
    <script>
	var yiliaConfig = {
		mathjax: false,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: true,
		toc_hide_index: false,
		root: "/",
		innerArchive: true,
		showTags: true
	}
</script>

<script>!function(r){function e(t){if(i[t])return i[t].exports;var n=i[t]={exports:{},id:t,loaded:!1};return r[t].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};e.m=r,e.c=i,e.p="./",e(0)}([function(t,n,r){r(208),t.exports=r(205)},function(t,n,r){var d=r(3),y=r(46),g=r(26),b=r(27),x=r(47),m="prototype",S=function(t,n,r){var e,i,o,u,c=t&S.F,f=t&S.G,a=t&S.S,s=t&S.P,l=t&S.B,h=f?d:a?d[n]||(d[n]={}):(d[n]||{})[m],v=f?y:y[n]||(y[n]={}),p=v[m]||(v[m]={});for(e in f&&(r=n),r)o=((i=!c&&h&&void 0!==h[e])?h:r)[e],u=l&&i?x(o,d):s&&"function"==typeof o?x(Function.call,o):o,h&&b(h,e,o,t&S.U),v[e]!=o&&g(v,e,u),s&&p[e]!=o&&(p[e]=o)};d.core=y,S.F=1,S.G=2,S.S=4,S.P=8,S.B=16,S.W=32,S.U=64,S.R=128,t.exports=S},function(t,n,r){var e=r(5);t.exports=function(t){if(!e(t))throw TypeError(t+" is not an object!");return t}},function(t,n){var r=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n){var r=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(t,n,r){var e=r(118)("wks"),i=r(79),o=r(3).Symbol,u="function"==typeof o;(t.exports=function(t){return e[t]||(e[t]=u&&o[t]||(u?o:i)("Symbol."+t))}).store=e},function(t,n,r){var e=r(49),i=Math.min;t.exports=function(t){return 0<t?i(e(t),9007199254740991):0}},function(t,n){var r={}.hasOwnProperty;t.exports=function(t,n){return r.call(t,n)}},function(t,n,r){t.exports=!r(4)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n,r){var e=r(2),i=r(174),o=r(53),u=Object.defineProperty;n.f=r(10)?Object.defineProperty:function(t,n,r){if(e(t),n=o(n,!0),e(r),i)try{return u(t,n,r)}catch(t){}if("get"in r||"set"in r)throw TypeError("Accessors not supported!");return"value"in r&&(t[n]=r.value),t}},function(t,n,r){t.exports=!r(20)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n,r){var e=r(14),i=r(24);t.exports=r(12)?function(t,n,r){return e.f(t,n,i(1,r))}:function(t,n,r){return t[n]=r,t}},function(t,n,r){var e=r(22),i=r(60),o=r(42),u=Object.defineProperty;n.f=r(12)?Object.defineProperty:function(t,n,r){if(e(t),n=o(n,!0),e(r),i)try{return u(t,n,r)}catch(t){}if("get"in r||"set"in r)throw TypeError("Accessors not supported!");return"value"in r&&(t[n]=r.value),t}},function(t,n,r){var e=r(96),i=r(34);t.exports=function(t){return e(i(t))}},function(t,n,r){var e=r(40)("wks"),i=r(25),o=r(6).Symbol,u="function"==typeof o;(t.exports=function(t){return e[t]||(e[t]=u&&o[t]||(u?o:i)("Symbol."+t))}).store=e},function(t,n,r){var e=r(51);t.exports=function(t){return Object(e(t))}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n){var r=t.exports={version:"2.6.9"};"number"==typeof __e&&(__e=r)},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n,r){var e=r(18);t.exports=function(t){if(!e(t))throw TypeError(t+" is not an object!");return t}},function(t,n){t.exports=!0},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n){var r=0,e=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++r+e).toString(36))}},function(t,n,r){var e=r(11),i=r(75);t.exports=r(10)?function(t,n,r){return e.f(t,n,i(1,r))}:function(t,n,r){return t[n]=r,t}},function(t,n,r){var o=r(3),u=r(26),c=r(30),f=r(79)("src"),e=r(219),i="toString",a=(""+e).split(i);r(46).inspectSource=function(t){return e.call(t)},(t.exports=function(t,n,r,e){var i="function"==typeof r;i&&(c(r,"name")||u(r,"name",n)),t[n]!==r&&(i&&(c(r,f)||u(r,f,t[n]?""+t[n]:a.join(String(n)))),t===o?t[n]=r:e?t[n]?t[n]=r:u(t,n,r):(delete t[n],u(t,n,r)))})(Function.prototype,i,function(){return"function"==typeof this&&this[f]||e.call(this)})},function(t,n,r){var e=r(1),i=r(4),u=r(51),c=/"/g,o=function(t,n,r,e){var i=String(u(t)),o="<"+n;return""!==r&&(o+=" "+r+'="'+String(e).replace(c,"&quot;")+'"'),o+">"+i+"</"+n+">"};t.exports=function(n,t){var r={};r[n]=t(o),e(e.P+e.F*i(function(){var t=""[n]('"');return t!==t.toLowerCase()||3<t.split('"').length}),"String",r)}},function(t,n,r){var e=r(65),i=r(35);t.exports=Object.keys||function(t){return e(t,i)}},function(t,n){var r={}.hasOwnProperty;t.exports=function(t,n){return r.call(t,n)}},function(t,n,r){var e=r(117),i=r(75),o=r(33),u=r(53),c=r(30),f=r(174),a=Object.getOwnPropertyDescriptor;n.f=r(10)?a:function(t,n){if(t=o(t),n=u(n,!0),f)try{return a(t,n)}catch(t){}if(c(t,n))return i(!e.f.call(t,n),t[n])}},function(t,n,r){var e=r(30),i=r(17),o=r(154)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),e(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},function(t,n,r){var e=r(116),i=r(51);t.exports=function(t){return e(i(t))}},function(t,n){t.exports=function(t){if(null==t)throw TypeError("Can't call method on  "+t);return t}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n){t.exports={}},function(t,n){n.f={}.propertyIsEnumerable},function(t,n,r){var e=r(14).f,i=r(9),o=r(16)("toStringTag");t.exports=function(t,n,r){t&&!i(t=r?t:t.prototype,o)&&e(t,o,{configurable:!0,value:n})}},function(t,n,r){var e=r(40)("keys"),i=r(25);t.exports=function(t){return e[t]||(e[t]=i(t))}},function(t,n,r){var e=r(19),i=r(6),o="__core-js_shared__",u=i[o]||(i[o]={});(t.exports=function(t,n){return u[t]||(u[t]=void 0!==n?n:{})})("versions",[]).push({version:e.version,mode:r(23)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,n){var r=Math.ceil,e=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(0<t?e:r)(t)}},function(t,n,r){var i=r(18);t.exports=function(t,n){if(!i(t))return t;var r,e;if(n&&"function"==typeof(r=t.toString)&&!i(e=r.call(t)))return e;if("function"==typeof(r=t.valueOf)&&!i(e=r.call(t)))return e;if(!n&&"function"==typeof(r=t.toString)&&!i(e=r.call(t)))return e;throw TypeError("Can't convert object to primitive value")}},function(t,n,r){var e=r(6),i=r(19),o=r(23),u=r(44),c=r(14).f;t.exports=function(t){var n=i.Symbol||(i.Symbol=o?{}:e.Symbol||{});"_"==t.charAt(0)||t in n||c(n,t,{value:u.f(t)})}},function(t,n,r){n.f=r(16)},function(t,n){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,n){var r=t.exports={version:"2.6.9"};"number"==typeof __e&&(__e=r)},function(t,n,r){var o=r(21);t.exports=function(e,i,t){if(o(e),void 0===i)return e;switch(t){case 1:return function(t){return e.call(i,t)};case 2:return function(t,n){return e.call(i,t,n)};case 3:return function(t,n,r){return e.call(i,t,n,r)}}return function(){return e.apply(i,arguments)}}},function(t,n,r){"use strict";var e=r(4);t.exports=function(t,n){return!!t&&e(function(){n?t.call(null,function(){},1):t.call(null)})}},function(t,n){var r=Math.ceil,e=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(0<t?e:r)(t)}},function(t,n,r){var x=r(47),m=r(116),S=r(17),w=r(8),e=r(138);t.exports=function(l,t){var h=1==l,v=2==l,p=3==l,d=4==l,y=6==l,g=5==l||y,b=t||e;return function(t,n,r){for(var e,i,o=S(t),u=m(o),c=x(n,r,3),f=w(u.length),a=0,s=h?b(t,f):v?b(t,0):void 0;a<f;a++)if((g||a in u)&&(i=c(e=u[a],a,o),l))if(h)s[a]=i;else if(i)switch(l){case 3:return!0;case 5:return e;case 6:return a;case 2:s.push(e)}else if(d)return!1;return y?-1:p||d?d:s}}},function(t,n){t.exports=function(t){if(null==t)throw TypeError("Can't call method on  "+t);return t}},function(t,n,r){var i=r(1),o=r(46),u=r(4);t.exports=function(t,n){var r=(o.Object||{})[t]||Object[t],e={};e[t]=n(r),i(i.S+i.F*u(function(){r(1)}),"Object",e)}},function(t,n,r){var i=r(5);t.exports=function(t,n){if(!i(t))return t;var r,e;if(n&&"function"==typeof(r=t.toString)&&!i(e=r.call(t)))return e;if("function"==typeof(r=t.valueOf)&&!i(e=r.call(t)))return e;if(!n&&"function"==typeof(r=t.toString)&&!i(e=r.call(t)))return e;throw TypeError("Can't convert object to primitive value")}},function(t,n,r){var d=r(6),y=r(19),g=r(93),b=r(13),x=r(9),m="prototype",S=function(t,n,r){var e,i,o,u=t&S.F,c=t&S.G,f=t&S.S,a=t&S.P,s=t&S.B,l=t&S.W,h=c?y:y[n]||(y[n]={}),v=h[m],p=c?d:f?d[n]:(d[n]||{})[m];for(e in c&&(r=n),r)(i=!u&&p&&void 0!==p[e])&&x(h,e)||(o=i?p[e]:r[e],h[e]=c&&"function"!=typeof p[e]?r[e]:s&&i?g(o,d):l&&p[e]==o?function(e){var t=function(t,n,r){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,n)}return new e(t,n,r)}return e.apply(this,arguments)};return t[m]=e[m],t}(o):a&&"function"==typeof o?g(Function.call,o):o,a&&((h.virtual||(h.virtual={}))[e]=o,t&S.R&&v&&!v[e]&&b(v,e,o)))};S.F=1,S.G=2,S.S=4,S.P=8,S.B=16,S.W=32,S.U=64,S.R=128,t.exports=S},function(t,n,r){var e=r(34);t.exports=function(t){return Object(e(t))}},function(t,n,r){var o=r(196),e=r(1),i=r(118)("metadata"),u=i.store||(i.store=new(r(200))),c=function(t,n,r){var e=u.get(t);if(!e){if(!r)return;u.set(t,e=new o)}var i=e.get(n);if(!i){if(!r)return;e.set(n,i=new o)}return i};t.exports={store:u,map:c,has:function(t,n,r){var e=c(n,r,!1);return void 0!==e&&e.has(t)},get:function(t,n,r){var e=c(n,r,!1);return void 0===e?void 0:e.get(t)},set:function(t,n,r,e){c(r,e,!0).set(t,n)},keys:function(t,n){var r=c(t,n,!1),e=[];return r&&r.forEach(function(t,n){e.push(n)}),e},key:function(t){return void 0===t||"symbol"==typeof t?t:String(t)},exp:function(t){e(e.S,"Reflect",t)}}},function(t,n,r){"use strict";if(r(10)){var g=r(68),b=r(3),x=r(4),m=r(1),S=r(132),e=r(159),h=r(47),w=r(70),i=r(75),_=r(26),o=r(76),u=r(49),O=r(8),E=r(194),c=r(78),f=r(53),a=r(30),M=r(81),P=r(5),v=r(17),p=r(145),j=r(72),F=r(32),A=r(73).f,d=r(161),s=r(79),l=r(7),y=r(50),I=r(120),L=r(119),N=r(162),T=r(82),k=r(125),R=r(77),C=r(137),D=r(166),G=r(11),W=r(31),U=G.f,V=W.f,B=b.RangeError,q=b.TypeError,z=b.Uint8Array,K="ArrayBuffer",H="Shared"+K,J="BYTES_PER_ELEMENT",$="prototype",Y=Array[$],X=e.ArrayBuffer,Q=e.DataView,Z=y(0),tt=y(2),nt=y(3),rt=y(4),et=y(5),it=y(6),ot=I(!0),ut=I(!1),ct=N.values,ft=N.keys,at=N.entries,st=Y.lastIndexOf,lt=Y.reduce,ht=Y.reduceRight,vt=Y.join,pt=Y.sort,dt=Y.slice,yt=Y.toString,gt=Y.toLocaleString,bt=l("iterator"),xt=l("toStringTag"),mt=s("typed_constructor"),St=s("def_constructor"),wt=S.CONSTR,_t=S.TYPED,Ot=S.VIEW,Et="Wrong length!",Mt=y(1,function(t,n){return It(L(t,t[St]),n)}),Pt=x(function(){return 1===new z(new Uint16Array([1]).buffer)[0]}),jt=!!z&&!!z[$].set&&x(function(){new z(1).set({})}),Ft=function(t,n){var r=u(t);if(r<0||r%n)throw B("Wrong offset!");return r},At=function(t){if(P(t)&&_t in t)return t;throw q(t+" is not a typed array!")},It=function(t,n){if(!(P(t)&&mt in t))throw q("It is not a typed array constructor!");return new t(n)},Lt=function(t,n){return Nt(L(t,t[St]),n)},Nt=function(t,n){for(var r=0,e=n.length,i=It(t,e);r<e;)i[r]=n[r++];return i},Tt=function(t,n,r){U(t,n,{get:function(){return this._d[r]}})},kt=function(t){var n,r,e,i,o,u,c=v(t),f=arguments.length,a=1<f?arguments[1]:void 0,s=void 0!==a,l=d(c);if(null!=l&&!p(l)){for(u=l.call(c),e=[],n=0;!(o=u.next()).done;n++)e.push(o.value);c=e}for(s&&2<f&&(a=h(a,arguments[2],2)),n=0,r=O(c.length),i=It(this,r);n<r;n++)i[n]=s?a(c[n],n):c[n];return i},Rt=function(){for(var t=0,n=arguments.length,r=It(this,n);t<n;)r[t]=arguments[t++];return r},Ct=!!z&&x(function(){gt.call(new z(1))}),Dt=function(){return gt.apply(Ct?dt.call(At(this)):At(this),arguments)},Gt={copyWithin:function(t,n){return D.call(At(this),t,n,2<arguments.length?arguments[2]:void 0)},every:function(t){return rt(At(this),t,1<arguments.length?arguments[1]:void 0)},fill:function(t){return C.apply(At(this),arguments)},filter:function(t){return Lt(this,tt(At(this),t,1<arguments.length?arguments[1]:void 0))},find:function(t){return et(At(this),t,1<arguments.length?arguments[1]:void 0)},findIndex:function(t){return it(At(this),t,1<arguments.length?arguments[1]:void 0)},forEach:function(t){Z(At(this),t,1<arguments.length?arguments[1]:void 0)},indexOf:function(t){return ut(At(this),t,1<arguments.length?arguments[1]:void 0)},includes:function(t){return ot(At(this),t,1<arguments.length?arguments[1]:void 0)},join:function(t){return vt.apply(At(this),arguments)},lastIndexOf:function(t){return st.apply(At(this),arguments)},map:function(t){return Mt(At(this),t,1<arguments.length?arguments[1]:void 0)},reduce:function(t){return lt.apply(At(this),arguments)},reduceRight:function(t){return ht.apply(At(this),arguments)},reverse:function(){for(var t,n=this,r=At(n).length,e=Math.floor(r/2),i=0;i<e;)t=n[i],n[i++]=n[--r],n[r]=t;return n},some:function(t){return nt(At(this),t,1<arguments.length?arguments[1]:void 0)},sort:function(t){return pt.call(At(this),t)},subarray:function(t,n){var r=At(this),e=r.length,i=c(t,e);return new(L(r,r[St]))(r.buffer,r.byteOffset+i*r.BYTES_PER_ELEMENT,O((void 0===n?e:c(n,e))-i))}},Wt=function(t,n){return Lt(this,dt.call(At(this),t,n))},Ut=function(t){At(this);var n=Ft(arguments[1],1),r=this.length,e=v(t),i=O(e.length),o=0;if(r<i+n)throw B(Et);for(;o<i;)this[n+o]=e[o++]},Vt={entries:function(){return at.call(At(this))},keys:function(){return ft.call(At(this))},values:function(){return ct.call(At(this))}},Bt=function(t,n){return P(t)&&t[_t]&&"symbol"!=typeof n&&n in t&&String(+n)==String(n)},qt=function(t,n){return Bt(t,n=f(n,!0))?i(2,t[n]):V(t,n)},zt=function(t,n,r){return!(Bt(t,n=f(n,!0))&&P(r)&&a(r,"value"))||a(r,"get")||a(r,"set")||r.configurable||a(r,"writable")&&!r.writable||a(r,"enumerable")&&!r.enumerable?U(t,n,r):(t[n]=r.value,t)};wt||(W.f=qt,G.f=zt),m(m.S+m.F*!wt,"Object",{getOwnPropertyDescriptor:qt,defineProperty:zt}),x(function(){yt.call({})})&&(yt=gt=function(){return vt.call(this)});var Kt=o({},Gt);o(Kt,Vt),_(Kt,bt,Vt.values),o(Kt,{slice:Wt,set:Ut,constructor:function(){},toString:yt,toLocaleString:Dt}),Tt(Kt,"buffer","b"),Tt(Kt,"byteOffset","o"),Tt(Kt,"byteLength","l"),Tt(Kt,"length","e"),U(Kt,xt,{get:function(){return this[_t]}}),t.exports=function(t,l,n,o){var h=t+((o=!!o)?"Clamped":"")+"Array",r="get"+t,u="set"+t,v=b[h],c=v||{},e=v&&F(v),i=!v||!S.ABV,f={},a=v&&v[$],p=function(t,i){U(t,i,{get:function(){return t=i,(n=this._d).v[r](t*l+n.o,Pt);var t,n},set:function(t){return n=i,r=t,e=this._d,o&&(r=(r=Math.round(r))<0?0:255<r?255:255&r),void e.v[u](n*l+e.o,r,Pt);var n,r,e},enumerable:!0})};i?(v=n(function(t,n,r,e){w(t,v,h,"_d");var i,o,u,c,f=0,a=0;if(P(n)){if(!(n instanceof X||(c=M(n))==K||c==H))return _t in n?Nt(v,n):kt.call(v,n);i=n,a=Ft(r,l);var s=n.byteLength;if(void 0===e){if(s%l)throw B(Et);if((o=s-a)<0)throw B(Et)}else if(s<(o=O(e)*l)+a)throw B(Et);u=o/l}else u=E(n),i=new X(o=u*l);for(_(t,"_d",{b:i,o:a,l:o,e:u,v:new Q(i)});f<u;)p(t,f++)}),a=v[$]=j(Kt),_(a,"constructor",v)):x(function(){v(1)})&&x(function(){new v(-1)})&&k(function(t){new v,new v(null),new v(1.5),new v(t)},!0)||(v=n(function(t,n,r,e){var i;return w(t,v,h),P(n)?n instanceof X||(i=M(n))==K||i==H?void 0!==e?new c(n,Ft(r,l),e):void 0!==r?new c(n,Ft(r,l)):new c(n):_t in n?Nt(v,n):kt.call(v,n):new c(E(n))}),Z(e!==Function.prototype?A(c).concat(A(e)):A(c),function(t){t in v||_(v,t,c[t])}),v[$]=a,g||(a.constructor=v));var s=a[bt],d=!!s&&("values"==s.name||null==s.name),y=Vt.values;_(v,mt,!0),_(a,_t,h),_(a,Ot,!0),_(a,St,v),(o?new v(1)[xt]==h:xt in a)||U(a,xt,{get:function(){return h}}),f[h]=v,m(m.G+m.W+m.F*(v!=c),f),m(m.S,h,{BYTES_PER_ELEMENT:l}),m(m.S+m.F*x(function(){c.of.call(v,1)}),h,{from:kt,of:Rt}),J in a||_(a,J,l),m(m.P,h,Gt),R(h),m(m.P+m.F*jt,h,{set:Ut}),m(m.P+m.F*!d,h,Vt),g||a.toString==yt||(a.toString=yt),m(m.P+m.F*x(function(){new v(1).slice()}),h,{slice:Wt}),m(m.P+m.F*(x(function(){return[1,2].toLocaleString()!=new v([1,2]).toLocaleString()})||!x(function(){a.toLocaleString.call([1,2])})),h,{toLocaleString:Dt}),T[h]=d?s:y,g||d||_(a,bt,y)}}else t.exports=function(){}},function(t,n){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,n,r){var e=r(18),i=r(6).document,o=e(i)&&e(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},function(t,n,r){t.exports=!r(12)&&!r(20)(function(){return 7!=Object.defineProperty(r(59)("div"),"a",{get:function(){return 7}}).a})},function(t,n,r){"use strict";var x=r(23),m=r(54),S=r(66),w=r(13),_=r(36),O=r(98),E=r(38),M=r(104),P=r(16)("iterator"),j=!([].keys&&"next"in[].keys()),F="values",A=function(){return this};t.exports=function(t,n,r,e,i,o,u){O(r,n,e);var c,f,a,s=function(t){if(!j&&t in p)return p[t];switch(t){case"keys":case F:return function(){return new r(this,t)}}return function(){return new r(this,t)}},l=n+" Iterator",h=i==F,v=!1,p=t.prototype,d=p[P]||p["@@iterator"]||i&&p[i],y=d||s(i),g=i?h?s("entries"):y:void 0,b="Array"==n&&p.entries||d;if(b&&((a=M(b.call(new t)))!==Object.prototype&&a.next&&(E(a,l,!0),x||"function"==typeof a[P]||w(a,P,A))),h&&d&&d.name!==F&&(v=!0,y=function(){return d.call(this)}),x&&!u||!j&&!v&&p[P]||w(p,P,y),_[n]=y,_[l]=A,i)if(c={values:h?y:s(F),keys:o?y:s("keys"),entries:g},u)for(f in c)f in p||S(p,f,c[f]);else m(m.P+m.F*(j||v),n,c);return c}},function(t,n,e){var i=e(22),o=e(101),u=e(35),c=e(39)("IE_PROTO"),f=function(){},a="prototype",s=function(){var t,n=e(59)("iframe"),r=u.length;for(n.style.display="none",e(95).appendChild(n),n.src="javascript:",(t=n.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),s=t.F;r--;)delete s[a][u[r]];return s()};t.exports=Object.create||function(t,n){var r;return null!==t?(f[a]=i(t),r=new f,f[a]=null,r[c]=t):r=s(),void 0===n?r:o(r,n)}},function(t,n,r){var e=r(65),i=r(35).concat("length","prototype");n.f=Object.getOwnPropertyNames||function(t){return e(t,i)}},function(t,n){n.f=Object.getOwnPropertySymbols},function(t,n,r){var u=r(9),c=r(15),f=r(92)(!1),a=r(39)("IE_PROTO");t.exports=function(t,n){var r,e=c(t),i=0,o=[];for(r in e)r!=a&&u(e,r)&&o.push(r);for(;n.length>i;)u(e,r=n[i++])&&(~f(o,r)||o.push(r));return o}},function(t,n,r){t.exports=r(13)},function(t,n,r){var e=r(7)("unscopables"),i=Array.prototype;null==i[e]&&r(26)(i,e,{}),t.exports=function(t){i[e][t]=!0}},function(t,n){t.exports=!1},function(t,n,r){var e=r(79)("meta"),i=r(5),o=r(30),u=r(11).f,c=0,f=Object.isExtensible||function(){return!0},a=!r(4)(function(){return f(Object.preventExtensions({}))}),s=function(t){u(t,e,{value:{i:"O"+ ++c,w:{}}})},l=t.exports={KEY:e,NEED:!1,fastKey:function(t,n){if(!i(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!o(t,e)){if(!f(t))return"F";if(!n)return"E";s(t)}return t[e].i},getWeak:function(t,n){if(!o(t,e)){if(!f(t))return!0;if(!n)return!1;s(t)}return t[e].w},onFreeze:function(t){return a&&l.NEED&&f(t)&&!o(t,e)&&s(t),t}}},function(t,n){t.exports=function(t,n,r,e){if(!(t instanceof n)||void 0!==e&&e in t)throw TypeError(r+": incorrect invocation!");return t}},function(t,n,r){var h=r(47),v=r(177),p=r(145),d=r(2),y=r(8),g=r(161),b={},x={};(n=t.exports=function(t,n,r,e,i){var o,u,c,f,a=i?function(){return t}:g(t),s=h(r,e,n?2:1),l=0;if("function"!=typeof a)throw TypeError(t+" is not iterable!");if(p(a)){for(o=y(t.length);l<o;l++)if((f=n?s(d(u=t[l])[0],u[1]):s(t[l]))===b||f===x)return f}else for(c=a.call(t);!(u=c.next()).done;)if((f=v(c,s,u.value,n))===b||f===x)return f}).BREAK=b,n.RETURN=x},function(t,n,e){var i=e(2),o=e(183),u=e(141),c=e(154)("IE_PROTO"),f=function(){},a="prototype",s=function(){var t,n=e(140)("iframe"),r=u.length;for(n.style.display="none",e(143).appendChild(n),n.src="javascript:",(t=n.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),s=t.F;r--;)delete s[a][u[r]];return s()};t.exports=Object.create||function(t,n){var r;return null!==t?(f[a]=i(t),r=new f,f[a]=null,r[c]=t):r=s(),void 0===n?r:o(r,n)}},function(t,n,r){var e=r(185),i=r(141).concat("length","prototype");n.f=Object.getOwnPropertyNames||function(t){return e(t,i)}},function(t,n,r){var e=r(185),i=r(141);t.exports=Object.keys||function(t){return e(t,i)}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,r){var i=r(27);t.exports=function(t,n,r){for(var e in n)i(t,e,n[e],r);return t}},function(t,n,r){"use strict";var e=r(3),i=r(11),o=r(10),u=r(7)("species");t.exports=function(t){var n=e[t];o&&n&&!n[u]&&i.f(n,u,{configurable:!0,get:function(){return this}})}},function(t,n,r){var e=r(49),i=Math.max,o=Math.min;t.exports=function(t,n){return(t=e(t))<0?i(t+n,0):o(t,n)}},function(t,n){var r=0,e=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++r+e).toString(36))}},function(t,n,r){var e=r(5);t.exports=function(t,n){if(!e(t)||t._t!==n)throw TypeError("Incompatible receiver, "+n+" required!");return t}},function(t,n,r){var i=r(45),o=r(7)("toStringTag"),u="Arguments"==i(function(){return arguments}());t.exports=function(t){var n,r,e;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,n){try{return t[n]}catch(t){}}(n=Object(t),o))?r:u?i(n):"Object"==(e=i(n))&&"function"==typeof n.callee?"Arguments":e}},function(t,n){t.exports={}},function(t,n,r){var e=r(11).f,i=r(30),o=r(7)("toStringTag");t.exports=function(t,n,r){t&&!i(t=r?t:t.prototype,o)&&e(t,o,{configurable:!0,value:n})}},function(t,n,r){var u=r(1),e=r(51),c=r(4),f=r(157),i="["+f+"]",o=RegExp("^"+i+i+"*"),a=RegExp(i+i+"*$"),s=function(t,n,r){var e={},i=c(function(){return!!f[t]()||"​"!="​"[t]()}),o=e[t]=i?n(l):f[t];r&&(e[r]=o),u(u.P+u.F*i,"String",e)},l=s.trim=function(t,n){return t=String(e(t)),1&n&&(t=t.replace(o,"")),2&n&&(t=t.replace(a,"")),t};t.exports=s},function(t,n,r){t.exports={default:r(88),__esModule:!0}},function(t,n,r){t.exports={default:r(89),__esModule:!0}},function(t,n,r){"use strict";function e(t){return t&&t.__esModule?t:{default:t}}n.__esModule=!0;var i=e(r(86)),o=e(r(85)),u="function"==typeof o.default&&"symbol"==typeof i.default?function(t){return typeof t}:function(t){return t&&"function"==typeof o.default&&t.constructor===o.default&&t!==o.default.prototype?"symbol":typeof t};n.default="function"==typeof o.default&&"symbol"===u(i.default)?function(t){return void 0===t?"undefined":u(t)}:function(t){return t&&"function"==typeof o.default&&t.constructor===o.default&&t!==o.default.prototype?"symbol":void 0===t?"undefined":u(t)}},function(t,n,r){r(111),r(109),r(112),r(113),t.exports=r(19).Symbol},function(t,n,r){r(110),r(114),t.exports=r(44).f("iterator")},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n){t.exports=function(){}},function(t,n,r){var f=r(15),a=r(107),s=r(106);t.exports=function(c){return function(t,n,r){var e,i=f(t),o=a(i.length),u=s(r,o);if(c&&n!=n){for(;u<o;)if((e=i[u++])!=e)return!0}else for(;u<o;u++)if((c||u in i)&&i[u]===n)return c||u||0;return!c&&-1}}},function(t,n,r){var o=r(90);t.exports=function(e,i,t){if(o(e),void 0===i)return e;switch(t){case 1:return function(t){return e.call(i,t)};case 2:return function(t,n){return e.call(i,t,n)};case 3:return function(t,n,r){return e.call(i,t,n,r)}}return function(){return e.apply(i,arguments)}}},function(t,n,r){var c=r(29),f=r(64),a=r(37);t.exports=function(t){var n=c(t),r=f.f;if(r)for(var e,i=r(t),o=a.f,u=0;i.length>u;)o.call(t,e=i[u++])&&n.push(e);return n}},function(t,n,r){var e=r(6).document;t.exports=e&&e.documentElement},function(t,n,r){var e=r(58);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==e(t)?t.split(""):Object(t)}},function(t,n,r){var e=r(58);t.exports=Array.isArray||function(t){return"Array"==e(t)}},function(t,n,r){"use strict";var e=r(62),i=r(24),o=r(38),u={};r(13)(u,r(16)("iterator"),function(){return this}),t.exports=function(t,n,r){t.prototype=e(u,{next:i(1,r)}),o(t,n+" Iterator")}},function(t,n){t.exports=function(t,n){return{value:n,done:!!t}}},function(t,n,r){var e=r(25)("meta"),i=r(18),o=r(9),u=r(14).f,c=0,f=Object.isExtensible||function(){return!0},a=!r(20)(function(){return f(Object.preventExtensions({}))}),s=function(t){u(t,e,{value:{i:"O"+ ++c,w:{}}})},l=t.exports={KEY:e,NEED:!1,fastKey:function(t,n){if(!i(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!o(t,e)){if(!f(t))return"F";if(!n)return"E";s(t)}return t[e].i},getWeak:function(t,n){if(!o(t,e)){if(!f(t))return!0;if(!n)return!1;s(t)}return t[e].w},onFreeze:function(t){return a&&l.NEED&&f(t)&&!o(t,e)&&s(t),t}}},function(t,n,r){var u=r(14),c=r(22),f=r(29);t.exports=r(12)?Object.defineProperties:function(t,n){c(t);for(var r,e=f(n),i=e.length,o=0;o<i;)u.f(t,r=e[o++],n[r]);return t}},function(t,n,r){var e=r(37),i=r(24),o=r(15),u=r(42),c=r(9),f=r(60),a=Object.getOwnPropertyDescriptor;n.f=r(12)?a:function(t,n){if(t=o(t),n=u(n,!0),f)try{return a(t,n)}catch(t){}if(c(t,n))return i(!e.f.call(t,n),t[n])}},function(t,n,r){var e=r(15),i=r(63).f,o={}.toString,u="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return u&&"[object Window]"==o.call(t)?function(t){try{return i(t)}catch(t){return u.slice()}}(t):i(e(t))}},function(t,n,r){var e=r(9),i=r(55),o=r(39)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),e(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},function(t,n,r){var f=r(41),a=r(34);t.exports=function(c){return function(t,n){var r,e,i=String(a(t)),o=f(n),u=i.length;return o<0||u<=o?c?"":void 0:(r=i.charCodeAt(o))<55296||56319<r||o+1===u||(e=i.charCodeAt(o+1))<56320||57343<e?c?i.charAt(o):r:c?i.slice(o,o+2):e-56320+(r-55296<<10)+65536}}},function(t,n,r){var e=r(41),i=Math.max,o=Math.min;t.exports=function(t,n){return(t=e(t))<0?i(t+n,0):o(t,n)}},function(t,n,r){var e=r(41),i=Math.min;t.exports=function(t){return 0<t?i(e(t),9007199254740991):0}},function(t,n,r){"use strict";var e=r(91),i=r(99),o=r(36),u=r(15);t.exports=r(61)(Array,"Array",function(t,n){this._t=u(t),this._i=0,this._k=n},function(){var t=this._t,n=this._k,r=this._i++;return!t||r>=t.length?(this._t=void 0,i(1)):i(0,"keys"==n?r:"values"==n?t[r]:[r,t[r]])},"values"),o.Arguments=o.Array,e("keys"),e("values"),e("entries")},function(t,n){},function(t,n,r){"use strict";var e=r(105)(!0);r(61)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,r=this._i;return r>=n.length?{value:void 0,done:!0}:(t=e(n,r),this._i+=t.length,{value:t,done:!1})})},function(t,n,r){"use strict";var e=r(6),u=r(9),i=r(12),o=r(54),c=r(66),f=r(100).KEY,a=r(20),s=r(40),l=r(38),h=r(25),v=r(16),p=r(44),d=r(43),y=r(94),g=r(97),b=r(22),x=r(18),m=r(55),S=r(15),w=r(42),_=r(24),O=r(62),E=r(103),M=r(102),P=r(64),j=r(14),F=r(29),A=M.f,I=j.f,L=E.f,N=e.Symbol,T=e.JSON,k=T&&T.stringify,R="prototype",C=v("_hidden"),D=v("toPrimitive"),G={}.propertyIsEnumerable,W=s("symbol-registry"),U=s("symbols"),V=s("op-symbols"),B=Object[R],q="function"==typeof N&&!!P.f,z=e.QObject,K=!z||!z[R]||!z[R].findChild,H=i&&a(function(){return 7!=O(I({},"a",{get:function(){return I(this,"a",{value:7}).a}})).a})?function(t,n,r){var e=A(B,n);e&&delete B[n],I(t,n,r),e&&t!==B&&I(B,n,e)}:I,J=function(t){var n=U[t]=O(N[R]);return n._k=t,n},$=q&&"symbol"==typeof N.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof N},Y=function(t,n,r){return t===B&&Y(V,n,r),b(t),n=w(n,!0),b(r),u(U,n)?(r.enumerable?(u(t,C)&&t[C][n]&&(t[C][n]=!1),r=O(r,{enumerable:_(0,!1)})):(u(t,C)||I(t,C,_(1,{})),t[C][n]=!0),H(t,n,r)):I(t,n,r)},X=function(t,n){b(t);for(var r,e=y(n=S(n)),i=0,o=e.length;i<o;)Y(t,r=e[i++],n[r]);return t},Q=function(t){var n=G.call(this,t=w(t,!0));return!(this===B&&u(U,t)&&!u(V,t))&&(!(n||!u(this,t)||!u(U,t)||u(this,C)&&this[C][t])||n)},Z=function(t,n){if(t=S(t),n=w(n,!0),t!==B||!u(U,n)||u(V,n)){var r=A(t,n);return!r||!u(U,n)||u(t,C)&&t[C][n]||(r.enumerable=!0),r}},tt=function(t){for(var n,r=L(S(t)),e=[],i=0;r.length>i;)u(U,n=r[i++])||n==C||n==f||e.push(n);return e},nt=function(t){for(var n,r=t===B,e=L(r?V:S(t)),i=[],o=0;e.length>o;)!u(U,n=e[o++])||r&&!u(B,n)||i.push(U[n]);return i};q||(c((N=function(){if(this instanceof N)throw TypeError("Symbol is not a constructor!");var n=h(0<arguments.length?arguments[0]:void 0),r=function(t){this===B&&r.call(V,t),u(this,C)&&u(this[C],n)&&(this[C][n]=!1),H(this,n,_(1,t))};return i&&K&&H(B,n,{configurable:!0,set:r}),J(n)})[R],"toString",function(){return this._k}),M.f=Z,j.f=Y,r(63).f=E.f=tt,r(37).f=Q,P.f=nt,i&&!r(23)&&c(B,"propertyIsEnumerable",Q,!0),p.f=function(t){return J(v(t))}),o(o.G+o.W+o.F*!q,{Symbol:N});for(var rt="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),et=0;rt.length>et;)v(rt[et++]);for(var it=F(v.store),ot=0;it.length>ot;)d(it[ot++]);o(o.S+o.F*!q,"Symbol",{for:function(t){return u(W,t+="")?W[t]:W[t]=N(t)},keyFor:function(t){if(!$(t))throw TypeError(t+" is not a symbol!");for(var n in W)if(W[n]===t)return n},useSetter:function(){K=!0},useSimple:function(){K=!1}}),o(o.S+o.F*!q,"Object",{create:function(t,n){return void 0===n?O(t):X(O(t),n)},defineProperty:Y,defineProperties:X,getOwnPropertyDescriptor:Z,getOwnPropertyNames:tt,getOwnPropertySymbols:nt});var ut=a(function(){P.f(1)});o(o.S+o.F*ut,"Object",{getOwnPropertySymbols:function(t){return P.f(m(t))}}),T&&o(o.S+o.F*(!q||a(function(){var t=N();return"[null]"!=k([t])||"{}"!=k({a:t})||"{}"!=k(Object(t))})),"JSON",{stringify:function(t){for(var n,r,e=[t],i=1;arguments.length>i;)e.push(arguments[i++]);if(r=n=e[1],(x(n)||void 0!==t)&&!$(t))return g(n)||(n=function(t,n){if("function"==typeof r&&(n=r.call(this,t,n)),!$(n))return n}),e[1]=n,k.apply(T,e)}}),N[R][D]||r(13)(N[R],D,N[R].valueOf),l(N,"Symbol"),l(Math,"Math",!0),l(e.JSON,"JSON",!0)},function(t,n,r){r(43)("asyncIterator")},function(t,n,r){r(43)("observable")},function(t,n,r){r(108);for(var e=r(6),i=r(13),o=r(36),u=r(16)("toStringTag"),c="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),f=0;f<c.length;f++){var a=c[f],s=e[a],l=s&&s.prototype;l&&!l[u]&&i(l,u,a),o[a]=o.Array}},function(t,n,r){"use strict";var e=r(2);t.exports=function(){var t=e(this),n="";return t.global&&(n+="g"),t.ignoreCase&&(n+="i"),t.multiline&&(n+="m"),t.unicode&&(n+="u"),t.sticky&&(n+="y"),n}},function(t,n,r){var e=r(45);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==e(t)?t.split(""):Object(t)}},function(t,n){n.f={}.propertyIsEnumerable},function(t,n,r){var e=r(46),i=r(3),o="__core-js_shared__",u=i[o]||(i[o]={});(t.exports=function(t,n){return u[t]||(u[t]=void 0!==n?n:{})})("versions",[]).push({version:e.version,mode:r(68)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,n,r){var i=r(2),o=r(21),u=r(7)("species");t.exports=function(t,n){var r,e=i(t).constructor;return void 0===e||null==(r=i(e)[u])?n:o(r)}},function(t,n,r){var f=r(33),a=r(8),s=r(78);t.exports=function(c){return function(t,n,r){var e,i=f(t),o=a(i.length),u=s(r,o);if(c&&n!=n){for(;u<o;)if((e=i[u++])!=e)return!0}else for(;u<o;u++)if((c||u in i)&&i[u]===n)return c||u||0;return!c&&-1}}},function(t,n,r){"use strict";var g=r(3),b=r(1),x=r(27),m=r(76),S=r(69),w=r(71),_=r(70),O=r(5),E=r(4),M=r(125),P=r(83),j=r(144);t.exports=function(e,t,n,r,i,o){var u=g[e],c=u,f=i?"set":"add",a=c&&c.prototype,s={},l=function(t){var r=a[t];x(a,t,"delete"==t?function(t){return!(o&&!O(t))&&r.call(this,0===t?0:t)}:"has"==t?function(t){return!(o&&!O(t))&&r.call(this,0===t?0:t)}:"get"==t?function(t){return o&&!O(t)?void 0:r.call(this,0===t?0:t)}:"add"==t?function(t){return r.call(this,0===t?0:t),this}:function(t,n){return r.call(this,0===t?0:t,n),this})};if("function"==typeof c&&(o||a.forEach&&!E(function(){(new c).entries().next()}))){var h=new c,v=h[f](o?{}:-0,1)!=h,p=E(function(){h.has(1)}),d=M(function(t){new c(t)}),y=!o&&E(function(){for(var t=new c,n=5;n--;)t[f](n,n);return!t.has(-0)});d||(((c=t(function(t,n){_(t,c,e);var r=j(new u,t,c);return null!=n&&w(n,i,r[f],r),r})).prototype=a).constructor=c),(p||y)&&(l("delete"),l("has"),i&&l("get")),(y||v)&&l(f),o&&a.clear&&delete a.clear}else c=r.getConstructor(t,e,i,f),m(c.prototype,n),S.NEED=!0;return P(c,e),s[e]=c,b(b.G+b.W+b.F*(c!=u),s),o||r.setStrong(c,e,i),c}},function(t,n,r){"use strict";r(197);var s=r(27),l=r(26),h=r(4),v=r(51),p=r(7),d=r(152),y=p("species"),g=!h(function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")}),b=function(){var t=/(?:)/,n=t.exec;t.exec=function(){return n.apply(this,arguments)};var r="ab".split(t);return 2===r.length&&"a"===r[0]&&"b"===r[1]}();t.exports=function(r,t,n){var e=p(r),o=!h(function(){var t={};return t[e]=function(){return 7},7!=""[r](t)}),i=o?!h(function(){var t=!1,n=/a/;return n.exec=function(){return t=!0,null},"split"===r&&(n.constructor={},n.constructor[y]=function(){return n}),n[e](""),!t}):void 0;if(!o||!i||"replace"===r&&!g||"split"===r&&!b){var u=/./[e],c=n(v,e,""[r],function(t,n,r,e,i){return n.exec===d?o&&!i?{done:!0,value:u.call(n,r,e)}:{done:!0,value:t.call(r,n,e)}:{done:!1}}),f=c[0],a=c[1];s(String.prototype,r,f),l(RegExp.prototype,e,2==t?function(t,n){return a.call(t,this,n)}:function(t){return a.call(t,this)})}}},function(t,n,r){var e=r(45);t.exports=Array.isArray||function(t){return"Array"==e(t)}},function(t,n,r){var e=r(5),i=r(45),o=r(7)("match");t.exports=function(t){var n;return e(t)&&(void 0!==(n=t[o])?!!n:"RegExp"==i(t))}},function(t,n,r){var o=r(7)("iterator"),u=!1;try{var e=[7][o]();e.return=function(){u=!0},Array.from(e,function(){throw 2})}catch(t){}t.exports=function(t,n){if(!n&&!u)return!1;var r=!1;try{var e=[7],i=e[o]();i.next=function(){return{done:r=!0}},e[o]=function(){return i},t(e)}catch(t){}return r}},function(t,n,r){"use strict";t.exports=r(68)||!r(4)(function(){var t=Math.random();__defineSetter__.call(null,t,function(){}),delete r(3)[t]})},function(t,n){n.f=Object.getOwnPropertySymbols},function(t,n,r){"use strict";var i=r(81),o=RegExp.prototype.exec;t.exports=function(t,n){var r=t.exec;if("function"==typeof r){var e=r.call(t,n);if("object"!=typeof e)throw new TypeError("RegExp exec method returned something other than an Object or null");return e}if("RegExp"!==i(t))throw new TypeError("RegExp#exec called on incompatible receiver");return o.call(t,n)}},function(t,n,r){"use strict";var e=r(1),u=r(21),c=r(47),f=r(71);t.exports=function(t){e(e.S,t,{from:function(t){var n,r,e,i,o=arguments[1];return u(this),(n=void 0!==o)&&u(o),null==t?new this:(r=[],n?(e=0,i=c(o,arguments[2],2),f(t,!1,function(t){r.push(i(t,e++))})):f(t,!1,r.push,r),new this(r))}})}},function(t,n,r){"use strict";var e=r(1);t.exports=function(t){e(e.S,t,{of:function(){for(var t=arguments.length,n=new Array(t);t--;)n[t]=arguments[t];return new this(n)}})}},function(t,n,r){var f=r(49),a=r(51);t.exports=function(c){return function(t,n){var r,e,i=String(a(t)),o=f(n),u=i.length;return o<0||u<=o?c?"":void 0:(r=i.charCodeAt(o))<55296||56319<r||o+1===u||(e=i.charCodeAt(o+1))<56320||57343<e?c?i.charAt(o):r:c?i.slice(o,o+2):e-56320+(r-55296<<10)+65536}}},function(t,n,r){for(var e,i=r(3),o=r(26),u=r(79),c=u("typed_array"),f=u("view"),a=!(!i.ArrayBuffer||!i.DataView),s=a,l=0,h="Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array".split(",");l<9;)(e=i[h[l++]])?(o(e.prototype,c,!0),o(e.prototype,f,!0)):s=!1;t.exports={ABV:a,CONSTR:s,TYPED:c,VIEW:f}},function(t,n,r){var e=r(3).navigator;t.exports=e&&e.userAgent||""},function(t,n){"use strict";var r,e={versions:(r=window.navigator.userAgent,{trident:-1<r.indexOf("Trident"),presto:-1<r.indexOf("Presto"),webKit:-1<r.indexOf("AppleWebKit"),gecko:-1<r.indexOf("Gecko")&&-1==r.indexOf("KHTML"),mobile:!!r.match(/AppleWebKit.*Mobile.*/),ios:!!r.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),android:-1<r.indexOf("Android")||-1<r.indexOf("Linux"),iPhone:-1<r.indexOf("iPhone")||-1<r.indexOf("Mac"),iPad:-1<r.indexOf("iPad"),webApp:-1==r.indexOf("Safari"),weixin:-1==r.indexOf("MicroMessenger")})};t.exports=e},function(t,n,r){"use strict";var e,i=r(87),l=(e=i)&&e.__esModule?e:{default:e},h=function(){function n(t,n,r){return n||r?String.fromCharCode(n||r):o[t]||t}function r(t){return s[t]}var e=/&quot;|&lt;|&gt;|&amp;|&nbsp;|&apos;|&#(\d+);|&#(\d+)/g,i=/['<> "&]/g,o={"&quot;":'"',"&lt;":"<","&gt;":">","&amp;":"&","&nbsp;":" "},u=/\u00a0/g,c=/<br\s*\/?>/gi,f=/\r?\n/g,a=/\s/g,s={};for(var t in o)s[o[t]]=t;return o["&apos;"]="'",s["'"]="&#39;",{encode:function(t){return t?(""+t).replace(i,r).replace(f,"<br/>").replace(a,"&nbsp;"):""},decode:function(t){return t?(""+t).replace(c,"\n").replace(e,n).replace(u," "):""},encodeBase16:function(t){if(!t)return t;for(var n=[],r=0,e=(t+="").length;r<e;r++)n.push(t.charCodeAt(r).toString(16).toUpperCase());return n.join("")},encodeBase16forJSON:function(t){if(!t)return t;for(var n=[],r=0,e=(t=t.replace(/[\u4E00-\u9FBF]/gi,function(t){return escape(t).replace("%u","\\u")})).length;r<e;r++)n.push(t.charCodeAt(r).toString(16).toUpperCase());return n.join("")},decodeBase16:function(t){if(!t)return t;for(var n=[],r=0,e=(t+="").length;r<e;r+=2)n.push(String.fromCharCode("0x"+t.slice(r,r+2)));return n.join("")},encodeObject:function(t){if(t instanceof Array)for(var n=0,r=t.length;n<r;n++)t[n]=h.encodeObject(t[n]);else if("object"==(void 0===t?"undefined":(0,l.default)(t)))for(var e in t)t[e]=h.encodeObject(t[e]);else if("string"==typeof t)return h.encode(t);return t},loadScript:function(t){var n=document.createElement("script");document.getElementsByTagName("body")[0].appendChild(n),n.setAttribute("src",t)},addLoadEvent:function(t){var n=window.onload;"function"!=typeof window.onload?window.onload=t:window.onload=function(){n(),t()}}}}();t.exports=h},function(t,n,r){"use strict";var e=r(131)(!0);t.exports=function(t,n,r){return n+(r?e(t,n).length:1)}},function(t,n,r){"use strict";var c=r(17),f=r(78),a=r(8);t.exports=function(t){for(var n=c(this),r=a(n.length),e=arguments.length,i=f(1<e?arguments[1]:void 0,r),o=2<e?arguments[2]:void 0,u=void 0===o?r:f(o,r);i<u;)n[i++]=t;return n}},function(t,n,r){var e=r(215);t.exports=function(t,n){return new(e(t))(n)}},function(t,n,r){"use strict";var e=r(11),i=r(75);t.exports=function(t,n,r){n in t?e.f(t,n,i(0,r)):t[n]=r}},function(t,n,r){var e=r(5),i=r(3).document,o=e(i)&&e(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,r){var e=r(7)("match");t.exports=function(n){var r=/./;try{"/./"[n](r)}catch(t){try{return r[e]=!1,!"/./"[n](r)}catch(n){}}return!0}},function(t,n,r){var e=r(3).document;t.exports=e&&e.documentElement},function(t,n,r){var o=r(5),u=r(153).set;t.exports=function(t,n,r){var e,i=n.constructor;return i!==r&&"function"==typeof i&&(e=i.prototype)!==r.prototype&&o(e)&&u&&u(t,e),t}},function(t,n,r){var e=r(82),i=r(7)("iterator"),o=Array.prototype;t.exports=function(t){return void 0!==t&&(e.Array===t||o[i]===t)}},function(t,n,r){"use strict";var e=r(72),i=r(75),o=r(83),u={};r(26)(u,r(7)("iterator"),function(){return this}),t.exports=function(t,n,r){t.prototype=e(u,{next:i(1,r)}),o(t,n+" Iterator")}},function(t,n,r){"use strict";var x=r(68),m=r(1),S=r(27),w=r(26),_=r(82),O=r(146),E=r(83),M=r(32),P=r(7)("iterator"),j=!([].keys&&"next"in[].keys()),F="values",A=function(){return this};t.exports=function(t,n,r,e,i,o,u){O(r,n,e);var c,f,a,s=function(t){if(!j&&t in p)return p[t];switch(t){case"keys":case F:return function(){return new r(this,t)}}return function(){return new r(this,t)}},l=n+" Iterator",h=i==F,v=!1,p=t.prototype,d=p[P]||p["@@iterator"]||i&&p[i],y=d||s(i),g=i?h?s("entries"):y:void 0,b="Array"==n&&p.entries||d;if(b&&((a=M(b.call(new t)))!==Object.prototype&&a.next&&(E(a,l,!0),x||"function"==typeof a[P]||w(a,P,A))),h&&d&&d.name!==F&&(v=!0,y=function(){return d.call(this)}),x&&!u||!j&&!v&&p[P]||w(p,P,y),_[n]=y,_[l]=A,i)if(c={values:h?y:s(F),keys:o?y:s("keys"),entries:g},u)for(f in c)f in p||S(p,f,c[f]);else m(m.P+m.F*(j||v),n,c);return c}},function(t,n){var r=Math.expm1;t.exports=!r||22025.465794806718<r(10)||r(10)<22025.465794806718||-2e-17!=r(-2e-17)?function(t){return 0==(t=+t)?t:-1e-6<t&&t<1e-6?t+t*t/2:Math.exp(t)-1}:r},function(t,n){t.exports=Math.sign||function(t){return 0==(t=+t)||t!=t?t:t<0?-1:1}},function(t,n,r){var c=r(3),f=r(158).set,a=c.MutationObserver||c.WebKitMutationObserver,s=c.process,l=c.Promise,h="process"==r(45)(s);t.exports=function(){var r,e,i,t=function(){var t,n;for(h&&(t=s.domain)&&t.exit();r;){n=r.fn,r=r.next;try{n()}catch(t){throw r?i():e=void 0,t}}e=void 0,t&&t.enter()};if(h)i=function(){s.nextTick(t)};else if(!a||c.navigator&&c.navigator.standalone)if(l&&l.resolve){var n=l.resolve(void 0);i=function(){n.then(t)}}else i=function(){f.call(c,t)};else{var o=!0,u=document.createTextNode("");new a(t).observe(u,{characterData:!0}),i=function(){u.data=o=!o}}return function(t){var n={fn:t,next:void 0};e&&(e.next=n),r||(r=n,i()),e=n}}},function(t,n,r){"use strict";function e(t){var r,e;this.promise=new t(function(t,n){if(void 0!==r||void 0!==e)throw TypeError("Bad Promise constructor");r=t,e=n}),this.resolve=i(r),this.reject=i(e)}var i=r(21);t.exports.f=function(t){return new e(t)}},function(t,n,r){"use strict";var e,i,u=r(115),c=RegExp.prototype.exec,f=String.prototype.replace,o=c,a="lastIndex",s=(e=/a/,i=/b*/g,c.call(e,"a"),c.call(i,"a"),0!==e[a]||0!==i[a]),l=void 0!==/()??/.exec("")[1];(s||l)&&(o=function(t){var n,r,e,i,o=this;return l&&(r=new RegExp("^"+o.source+"$(?!\\s)",u.call(o))),s&&(n=o[a]),e=c.call(o,t),s&&e&&(o[a]=o.global?e.index+e[0].length:n),l&&e&&1<e.length&&f.call(e[0],r,function(){for(i=1;i<arguments.length-2;i++)void 0===arguments[i]&&(e[i]=void 0)}),e}),t.exports=o},function(t,n,i){var r=i(5),e=i(2),o=function(t,n){if(e(t),!r(n)&&null!==n)throw TypeError(n+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,r,e){try{(e=i(47)(Function.call,i(31).f(Object.prototype,"__proto__").set,2))(t,[]),r=!(t instanceof Array)}catch(t){r=!0}return function(t,n){return o(t,n),r?t.__proto__=n:e(t,n),t}}({},!1):void 0),check:o}},function(t,n,r){var e=r(118)("keys"),i=r(79);t.exports=function(t){return e[t]||(e[t]=i(t))}},function(t,n,r){var e=r(124),i=r(51);t.exports=function(t,n,r){if(e(n))throw TypeError("String#"+r+" doesn't accept regex!");return String(i(t))}},function(t,n,r){"use strict";var i=r(49),o=r(51);t.exports=function(t){var n=String(o(this)),r="",e=i(t);if(e<0||e==1/0)throw RangeError("Count can't be negative");for(;0<e;(e>>>=1)&&(n+=n))1&e&&(r+=n);return r}},function(t,n){t.exports="\t\n\v\f\r   ᠎             　\u2028\u2029\ufeff"},function(t,n,r){var e,i,o,u=r(47),c=r(175),f=r(143),a=r(140),s=r(3),l=s.process,h=s.setImmediate,v=s.clearImmediate,p=s.MessageChannel,d=s.Dispatch,y=0,g={},b="onreadystatechange",x=function(){var t=+this;if(g.hasOwnProperty(t)){var n=g[t];delete g[t],n()}},m=function(t){x.call(t.data)};h&&v||(h=function(t){for(var n=[],r=1;arguments.length>r;)n.push(arguments[r++]);return g[++y]=function(){c("function"==typeof t?t:Function(t),n)},e(y),y},v=function(t){delete g[t]},"process"==r(45)(l)?e=function(t){l.nextTick(u(x,t,1))}:d&&d.now?e=function(t){d.now(u(x,t,1))}:p?(o=(i=new p).port2,i.port1.onmessage=m,e=u(o.postMessage,o,1)):s.addEventListener&&"function"==typeof postMessage&&!s.importScripts?(e=function(t){s.postMessage(t+"","*")},s.addEventListener("message",m,!1)):e=b in a("script")?function(t){f.appendChild(a("script"))[b]=function(){f.removeChild(this),x.call(t)}}:function(t){setTimeout(u(x,t,1),0)}),t.exports={set:h,clear:v}},function(t,n,r){"use strict";function e(t,n,r){var e,i,o,u=new Array(r),c=8*r-n-1,f=(1<<c)-1,a=f>>1,s=23===n?W(2,-24)-W(2,-77):0,l=0,h=t<0||0===t&&1/t<0?1:0;for((t=G(t))!=t||t===C?(i=t!=t?1:0,e=f):(e=U(V(t)/B),t*(o=W(2,-e))<1&&(e--,o*=2),2<=(t+=1<=e+a?s/o:s*W(2,1-a))*o&&(e++,o/=2),f<=e+a?(i=0,e=f):1<=e+a?(i=(t*o-1)*W(2,n),e+=a):(i=t*W(2,a-1)*W(2,n),e=0));8<=n;u[l++]=255&i,i/=256,n-=8);for(e=e<<n|i,c+=n;0<c;u[l++]=255&e,e/=256,c-=8);return u[--l]|=128*h,u}function i(t,n,r){var e,i=8*r-n-1,o=(1<<i)-1,u=o>>1,c=i-7,f=r-1,a=t[f--],s=127&a;for(a>>=7;0<c;s=256*s+t[f],f--,c-=8);for(e=s&(1<<-c)-1,s>>=-c,c+=n;0<c;e=256*e+t[f],f--,c-=8);if(0===s)s=1-u;else{if(s===o)return e?NaN:a?-C:C;e+=W(2,n),s-=u}return(a?-1:1)*e*W(2,s-n)}function o(t){return t[3]<<24|t[2]<<16|t[1]<<8|t[0]}function u(t){return[255&t]}function c(t){return[255&t,t>>8&255]}function f(t){return[255&t,t>>8&255,t>>16&255,t>>24&255]}function a(t){return e(t,52,8)}function s(t){return e(t,23,4)}function l(t,n,r){M(t[I],n,{get:function(){return this[r]}})}function h(t,n,r,e){var i=O(+r);if(i+n>t[H])throw R(L);var o=t[K]._b,u=i+t[J],c=o.slice(u,u+n);return e?c:c.reverse()}function v(t,n,r,e,i,o){var u=O(+r);if(u+n>t[H])throw R(L);for(var c=t[K]._b,f=u+t[J],a=e(+i),s=0;s<n;s++)c[f+s]=a[o?s:n-s-1]}var p=r(3),d=r(10),y=r(68),g=r(132),b=r(26),x=r(76),m=r(4),S=r(70),w=r(49),_=r(8),O=r(194),E=r(73).f,M=r(11).f,P=r(137),j=r(83),F="ArrayBuffer",A="DataView",I="prototype",L="Wrong index!",N=p[F],T=p[A],k=p.Math,R=p.RangeError,C=p.Infinity,D=N,G=k.abs,W=k.pow,U=k.floor,V=k.log,B=k.LN2,q="byteLength",z="byteOffset",K=d?"_b":"buffer",H=d?"_l":q,J=d?"_o":z;if(g.ABV){if(!m(function(){N(1)})||!m(function(){new N(-1)})||m(function(){return new N,new N(1.5),new N(NaN),N.name!=F})){for(var $,Y=(N=function(t){return S(this,N),new D(O(t))})[I]=D[I],X=E(D),Q=0;X.length>Q;)($=X[Q++])in N||b(N,$,D[$]);y||(Y.constructor=N)}var Z=new T(new N(2)),tt=T[I].setInt8;Z.setInt8(0,2147483648),Z.setInt8(1,2147483649),!Z.getInt8(0)&&Z.getInt8(1)||x(T[I],{setInt8:function(t,n){tt.call(this,t,n<<24>>24)},setUint8:function(t,n){tt.call(this,t,n<<24>>24)}},!0)}else N=function(t){S(this,N,F);var n=O(t);this._b=P.call(new Array(n),0),this[H]=n},T=function(t,n,r){S(this,T,A),S(t,N,A);var e=t[H],i=w(n);if(i<0||e<i)throw R("Wrong offset!");if(e<i+(r=void 0===r?e-i:_(r)))throw R("Wrong length!");this[K]=t,this[J]=i,this[H]=r},d&&(l(N,q,"_l"),l(T,"buffer","_b"),l(T,q,"_l"),l(T,z,"_o")),x(T[I],{getInt8:function(t){return h(this,1,t)[0]<<24>>24},getUint8:function(t){return h(this,1,t)[0]},getInt16:function(t){var n=h(this,2,t,arguments[1]);return(n[1]<<8|n[0])<<16>>16},getUint16:function(t){var n=h(this,2,t,arguments[1]);return n[1]<<8|n[0]},getInt32:function(t){return o(h(this,4,t,arguments[1]))},getUint32:function(t){return o(h(this,4,t,arguments[1]))>>>0},getFloat32:function(t){return i(h(this,4,t,arguments[1]),23,4)},getFloat64:function(t){return i(h(this,8,t,arguments[1]),52,8)},setInt8:function(t,n){v(this,1,t,u,n)},setUint8:function(t,n){v(this,1,t,u,n)},setInt16:function(t,n){v(this,2,t,c,n,arguments[2])},setUint16:function(t,n){v(this,2,t,c,n,arguments[2])},setInt32:function(t,n){v(this,4,t,f,n,arguments[2])},setUint32:function(t,n){v(this,4,t,f,n,arguments[2])},setFloat32:function(t,n){v(this,4,t,s,n,arguments[2])},setFloat64:function(t,n){v(this,8,t,a,n,arguments[2])}});j(N,F),j(T,A),b(T[I],g.VIEW,!0),n[F]=N,n[A]=T},function(t,n,r){var e=r(3),i=r(46),o=r(68),u=r(195),c=r(11).f;t.exports=function(t){var n=i.Symbol||(i.Symbol=o?{}:e.Symbol||{});"_"==t.charAt(0)||t in n||c(n,t,{value:u.f(t)})}},function(t,n,r){var e=r(81),i=r(7)("iterator"),o=r(82);t.exports=r(46).getIteratorMethod=function(t){if(null!=t)return t[i]||t["@@iterator"]||o[e(t)]}},function(t,n,r){"use strict";var e=r(67),i=r(178),o=r(82),u=r(33);t.exports=r(147)(Array,"Array",function(t,n){this._t=u(t),this._i=0,this._k=n},function(){var t=this._t,n=this._k,r=this._i++;return!t||r>=t.length?(this._t=void 0,i(1)):i(0,"keys"==n?r:"values"==n?t[r]:[r,t[r]])},"values"),o.Arguments=o.Array,e("keys"),e("values"),e("entries")},function(t,n){t.exports=function(t,n){t.classList?t.classList.add(n):t.className+=" "+n}},function(t,n){t.exports=function(t,n){if(t.classList)t.classList.remove(n);else{var r=new RegExp("(^|\\b)"+n.split(" ").join("|")+"(\\b|$)","gi");t.className=t.className.replace(r," ")}}},function(t,n,r){var e=r(45);t.exports=function(t,n){if("number"!=typeof t&&"Number"!=e(t))throw TypeError(n);return+t}},function(t,n,r){"use strict";var a=r(17),s=r(78),l=r(8);t.exports=[].copyWithin||function(t,n){var r=a(this),e=l(r.length),i=s(t,e),o=s(n,e),u=2<arguments.length?arguments[2]:void 0,c=Math.min((void 0===u?e:s(u,e))-o,e-i),f=1;for(o<i&&i<o+c&&(f=-1,o+=c-1,i+=c-1);0<c--;)o in r?r[i]=r[o]:delete r[i],i+=f,o+=f;return r}},function(t,n,r){var e=r(71);t.exports=function(t,n){var r=[];return e(t,!1,r.push,r,n),r}},function(t,n,r){var s=r(21),l=r(17),h=r(116),v=r(8);t.exports=function(t,n,r,e,i){s(n);var o=l(t),u=h(o),c=v(o.length),f=i?c-1:0,a=i?-1:1;if(r<2)for(;;){if(f in u){e=u[f],f+=a;break}if(f+=a,i?f<0:c<=f)throw TypeError("Reduce of empty array with no initial value")}for(;i?0<=f:f<c;f+=a)f in u&&(e=n(e,u[f],f,o));return e}},function(t,n,r){"use strict";var o=r(21),u=r(5),c=r(175),f=[].slice,a={};t.exports=Function.bind||function(n){var r=o(this),e=f.call(arguments,1),i=function(){var t=e.concat(f.call(arguments));return this instanceof i?function(t,n,r){if(!(n in a)){for(var e=[],i=0;i<n;i++)e[i]="a["+i+"]";a[n]=Function("F,a","return new F("+e.join(",")+")")}return a[n](t,r)}(r,t.length,t):c(r,t,n)};return u(r.prototype)&&(i.prototype=r.prototype),i}},function(t,n,r){"use strict";var u=r(11).f,c=r(72),f=r(76),a=r(47),s=r(70),l=r(71),e=r(147),i=r(178),o=r(77),h=r(10),v=r(69).fastKey,p=r(80),d=h?"_s":"size",y=function(t,n){var r,e=v(n);if("F"!==e)return t._i[e];for(r=t._f;r;r=r.n)if(r.k==n)return r};t.exports={getConstructor:function(t,o,r,e){var i=t(function(t,n){s(t,i,o,"_i"),t._t=o,t._i=c(null),t._f=void 0,t._l=void 0,t[d]=0,null!=n&&l(n,r,t[e],t)});return f(i.prototype,{clear:function(){for(var t=p(this,o),n=t._i,r=t._f;r;r=r.n)r.r=!0,r.p&&(r.p=r.p.n=void 0),delete n[r.i];t._f=t._l=void 0,t[d]=0},delete:function(t){var n=p(this,o),r=y(n,t);if(r){var e=r.n,i=r.p;delete n._i[r.i],r.r=!0,i&&(i.n=e),e&&(e.p=i),n._f==r&&(n._f=e),n._l==r&&(n._l=i),n[d]--}return!!r},forEach:function(t){p(this,o);for(var n,r=a(t,1<arguments.length?arguments[1]:void 0,3);n=n?n.n:this._f;)for(r(n.v,n.k,this);n&&n.r;)n=n.p},has:function(t){return!!y(p(this,o),t)}}),h&&u(i.prototype,"size",{get:function(){return p(this,o)[d]}}),i},def:function(t,n,r){var e,i,o=y(t,n);return o?o.v=r:(t._l=o={i:i=v(n,!0),k:n,v:r,p:e=t._l,n:void 0,r:!1},t._f||(t._f=o),e&&(e.n=o),t[d]++,"F"!==i&&(t._i[i]=o)),t},getEntry:y,setStrong:function(t,r,n){e(t,r,function(t,n){this._t=p(t,r),this._k=n,this._l=void 0},function(){for(var t=this,n=t._k,r=t._l;r&&r.r;)r=r.p;return t._t&&(t._l=r=r?r.n:t._t._f)?i(0,"keys"==n?r.k:"values"==n?r.v:[r.k,r.v]):(t._t=void 0,i(1))},n?"entries":"values",!n,!0),o(r)}}},function(t,n,r){var e=r(81),i=r(167);t.exports=function(t){return function(){if(e(this)!=t)throw TypeError(t+"#toJSON isn't generic");return i(this)}}},function(t,n,r){"use strict";var u=r(76),c=r(69).getWeak,i=r(2),f=r(5),a=r(70),s=r(71),e=r(50),l=r(30),h=r(80),o=e(5),v=e(6),p=0,d=function(t){return t._l||(t._l=new y)},y=function(){this.a=[]},g=function(t,n){return o(t.a,function(t){return t[0]===n})};y.prototype={get:function(t){var n=g(this,t);if(n)return n[1]},has:function(t){return!!g(this,t)},set:function(t,n){var r=g(this,t);r?r[1]=n:this.a.push([t,n])},delete:function(n){var t=v(this.a,function(t){return t[0]===n});return~t&&this.a.splice(t,1),!!~t}},t.exports={getConstructor:function(t,r,e,i){var o=t(function(t,n){a(t,o,r,"_i"),t._t=r,t._i=p++,t._l=void 0,null!=n&&s(n,e,t[i],t)});return u(o.prototype,{delete:function(t){if(!f(t))return!1;var n=c(t);return!0===n?d(h(this,r)).delete(t):n&&l(n,this._i)&&delete n[this._i]},has:function(t){if(!f(t))return!1;var n=c(t);return!0===n?d(h(this,r)).has(t):n&&l(n,this._i)}}),o},def:function(t,n,r){var e=c(i(n),!0);return!0===e?d(t).set(n,r):e[t._i]=r,t},ufstore:d}},function(t,n,r){"use strict";var p=r(123),d=r(5),y=r(8),g=r(47),b=r(7)("isConcatSpreadable");t.exports=function t(n,r,e,i,o,u,c,f){for(var a,s,l=o,h=0,v=!!c&&g(c,f,3);h<i;){if(h in e){if(a=v?v(e[h],h,r):e[h],s=!1,d(a)&&(s=void 0!==(s=a[b])?!!s:p(a)),s&&0<u)l=t(n,r,a,y(a.length),l,u-1)-1;else{if(9007199254740991<=l)throw TypeError();n[l]=a}l++}h++}return l}},function(t,n,r){t.exports=!r(10)&&!r(4)(function(){return 7!=Object.defineProperty(r(140)("div"),"a",{get:function(){return 7}}).a})},function(t,n){t.exports=function(t,n,r){var e=void 0===r;switch(n.length){case 0:return e?t():t.call(r);case 1:return e?t(n[0]):t.call(r,n[0]);case 2:return e?t(n[0],n[1]):t.call(r,n[0],n[1]);case 3:return e?t(n[0],n[1],n[2]):t.call(r,n[0],n[1],n[2]);case 4:return e?t(n[0],n[1],n[2],n[3]):t.call(r,n[0],n[1],n[2],n[3])}return t.apply(r,n)}},function(t,n,r){var e=r(5),i=Math.floor;t.exports=function(t){return!e(t)&&isFinite(t)&&i(t)===t}},function(t,n,r){var o=r(2);t.exports=function(t,n,r,e){try{return e?n(o(r)[0],r[1]):n(r)}catch(n){var i=t.return;throw void 0!==i&&o(i.call(t)),n}}},function(t,n){t.exports=function(t,n){return{value:n,done:!!t}}},function(t,n,r){var o=r(149),e=Math.pow,u=e(2,-52),c=e(2,-23),f=e(2,127)*(2-c),a=e(2,-126);t.exports=Math.fround||function(t){var n,r,e=Math.abs(t),i=o(t);return e<a?i*(e/a/c+1/u-1/u)*a*c:f<(r=(n=(1+c/u)*e)-(n-e))||r!=r?i*(1/0):i*r}},function(t,n){t.exports=Math.log1p||function(t){return-1e-8<(t=+t)&&t<1e-8?t-t*t/2:Math.log(1+t)}},function(t,n){t.exports=Math.scale||function(t,n,r,e,i){return 0===arguments.length||t!=t||n!=n||r!=r||e!=e||i!=i?NaN:t===1/0||t===-1/0?t:(t-n)*(i-e)/(r-n)+e}},function(t,n,r){"use strict";var h=r(10),v=r(74),p=r(127),d=r(117),y=r(17),g=r(116),i=Object.assign;t.exports=!i||r(4)(function(){var t={},n={},r=Symbol(),e="abcdefghijklmnopqrst";return t[r]=7,e.split("").forEach(function(t){n[t]=t}),7!=i({},t)[r]||Object.keys(i({},n)).join("")!=e})?function(t,n){for(var r=y(t),e=arguments.length,i=1,o=p.f,u=d.f;i<e;)for(var c,f=g(arguments[i++]),a=o?v(f).concat(o(f)):v(f),s=a.length,l=0;l<s;)c=a[l++],h&&!u.call(f,c)||(r[c]=f[c]);return r}:i},function(t,n,r){var u=r(11),c=r(2),f=r(74);t.exports=r(10)?Object.defineProperties:function(t,n){c(t);for(var r,e=f(n),i=e.length,o=0;o<i;)u.f(t,r=e[o++],n[r]);return t}},function(t,n,r){var e=r(33),i=r(73).f,o={}.toString,u="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return u&&"[object Window]"==o.call(t)?function(t){try{return i(t)}catch(t){return u.slice()}}(t):i(e(t))}},function(t,n,r){var u=r(30),c=r(33),f=r(120)(!1),a=r(154)("IE_PROTO");t.exports=function(t,n){var r,e=c(t),i=0,o=[];for(r in e)r!=a&&u(e,r)&&o.push(r);for(;n.length>i;)u(e,r=n[i++])&&(~f(o,r)||o.push(r));return o}},function(t,n,r){var f=r(10),a=r(74),s=r(33),l=r(117).f;t.exports=function(c){return function(t){for(var n,r=s(t),e=a(r),i=e.length,o=0,u=[];o<i;)n=e[o++],f&&!l.call(r,n)||u.push(c?[n,r[n]]:r[n]);return u}}},function(t,n,r){var e=r(73),i=r(127),o=r(2),u=r(3).Reflect;t.exports=u&&u.ownKeys||function(t){var n=e.f(o(t)),r=i.f;return r?n.concat(r(t)):n}},function(t,n,r){var e=r(3).parseFloat,i=r(84).trim;t.exports=1/e(r(157)+"-0")!=-1/0?function(t){var n=i(String(t),3),r=e(n);return 0===r&&"-"==n.charAt(0)?-0:r}:e},function(t,n,r){var e=r(3).parseInt,i=r(84).trim,o=r(157),u=/^[-+]?0[xX]/;t.exports=8!==e(o+"08")||22!==e(o+"0x16")?function(t,n){var r=i(String(t),3);return e(r,n>>>0||(u.test(r)?16:10))}:e},function(t,n){t.exports=function(t){try{return{e:!1,v:t()}}catch(t){return{e:!0,v:t}}}},function(t,n,r){var e=r(2),i=r(5),o=r(151);t.exports=function(t,n){if(e(t),i(n)&&n.constructor===t)return n;var r=o.f(t);return(0,r.resolve)(n),r.promise}},function(t,n){t.exports=Object.is||function(t,n){return t===n?0!==t||1/t==1/n:t!=t&&n!=n}},function(t,n,r){var s=r(8),l=r(156),h=r(51);t.exports=function(t,n,r,e){var i=String(h(t)),o=i.length,u=void 0===r?" ":String(r),c=s(n);if(c<=o||""==u)return i;var f=c-o,a=l.call(u,Math.ceil(f/u.length));return a.length>f&&(a=a.slice(0,f)),e?a+i:i+a}},function(t,n,r){var e=r(49),i=r(8);t.exports=function(t){if(void 0===t)return 0;var n=e(t),r=i(n);if(n!==r)throw RangeError("Wrong length!");return r}},function(t,n,r){n.f=r(7)},function(t,n,r){"use strict";var e=r(170),i=r(80);t.exports=r(121)("Map",function(t){return function(){return t(this,0<arguments.length?arguments[0]:void 0)}},{get:function(t){var n=e.getEntry(i(this,"Map"),t);return n&&n.v},set:function(t,n){return e.def(i(this,"Map"),0===t?0:t,n)}},e,!0)},function(t,n,r){"use strict";var e=r(152);r(1)({target:"RegExp",proto:!0,forced:e!==/./.exec},{exec:e})},function(t,n,r){r(10)&&"g"!=/./g.flags&&r(11).f(RegExp.prototype,"flags",{configurable:!0,get:r(115)})},function(t,n,r){"use strict";var e=r(170),i=r(80);t.exports=r(121)("Set",function(t){return function(){return t(this,0<arguments.length?arguments[0]:void 0)}},{add:function(t){return e.def(i(this,"Set"),t=0===t?0:t,t)}},e)},function(t,n,r){"use strict";var o,e=r(3),i=r(50)(0),u=r(27),c=r(69),f=r(182),a=r(172),s=r(5),l=r(80),h=r(80),v=!e.ActiveXObject&&"ActiveXObject"in e,p="WeakMap",d=c.getWeak,y=Object.isExtensible,g=a.ufstore,b=function(t){return function(){return t(this,0<arguments.length?arguments[0]:void 0)}},x={get:function(t){if(s(t)){var n=d(t);return!0===n?g(l(this,p)).get(t):n?n[this._i]:void 0}},set:function(t,n){return a.def(l(this,p),t,n)}},m=t.exports=r(121)(p,b,x,a,!0,!0);h&&v&&(f((o=a.getConstructor(b,p)).prototype,x),c.NEED=!0,i(["delete","has","get","set"],function(e){var t=m.prototype,i=t[e];u(t,e,function(t,n){if(!s(t)||y(t))return i.call(this,t,n);this._f||(this._f=new o);var r=this._f[e](t,n);return"set"==e?this:r})}))},,,,function(t,n){"use strict";t.exports={init:function(){var t=document.querySelector("#page-nav");t&&!document.querySelector("#page-nav .extend.prev")&&(t.innerHTML='<a class="extend prev disabled" rel="prev">&laquo; Prev</a>'+t.innerHTML),t&&!document.querySelector("#page-nav .extend.next")&&(t.innerHTML=t.innerHTML+'<a class="extend next disabled" rel="next">Next &raquo;</a>'),yiliaConfig&&yiliaConfig.open_in_new&&document.querySelectorAll(".article-entry a:not(.article-more-a)").forEach(function(t){var n=t.getAttribute("target");n&&""!==n||t.setAttribute("target","_blank")}),yiliaConfig&&yiliaConfig.toc_hide_index&&document.querySelectorAll(".toc-number").forEach(function(t){t.style.display="none"})}}},function(t,n,r){"use strict";function e(t){return t&&t.__esModule?t:{default:t}}function i(t,n,r,e,i){var o=function(t){for(var n=t.offsetLeft,r=t.offsetParent;null!==r;)n+=r.offsetLeft,r=r.offsetParent;return n}(t),u=function(t){for(var n=t.offsetTop,r=t.offsetParent;null!==r;)n+=r.offsetTop,r=r.offsetParent;return n}(t)-n;if(u-r<=i){var c=t.$newDom;c||(c=t.cloneNode(!0),(0,a.default)(t,c),(t.$newDom=c).style.position="fixed",c.style.top=(r||u)+"px",c.style.left=o+"px",c.style.zIndex=e||2,c.style.width="100%",c.style.color="#fff"),c.style.visibility="visible",t.style.visibility="hidden"}else{t.style.visibility="visible";var f=t.$newDom;f&&(f.style.visibility="hidden")}}function o(){var t=document.querySelector(".js-overlay"),n=document.querySelector(".js-header-menu");i(t,document.body.scrollTop,-63,2,0),i(n,document.body.scrollTop,1,3,0)}var f=e(r(163)),a=e((e(r(164)),r(414))),u=e(r(134)),c=e(r(204)),s=r(135);u.default.versions.mobile&&window.screen.width<800&&(function(){for(var t=document.querySelectorAll(".js-header-menu li a"),n=window.location.pathname,r=0,e=t.length;r<e;r++){var i=t[r];o=n,u=i.getAttribute("href"),c=/\/|index.html/g,o.replace(c,"")===u.replace(c,"")&&(0,f.default)(i,"active")}var o,u,c}(),document.querySelector("#container").addEventListener("scroll",function(t){o()}),window.addEventListener("scroll",function(t){o()}),o()),(0,s.addLoadEvent)(function(){c.default.init()}),t.exports={}},,,function(t,n,r){(function(t){"use strict";function n(t,n,r){t[n]||Object.defineProperty(t,n,{writable:!0,configurable:!0,value:r})}if(r(413),r(209),r(211),t._babelPolyfill)throw new Error("only one instance of babel-polyfill is allowed");t._babelPolyfill=!0;n(String.prototype,"padLeft","".padStart),n(String.prototype,"padRight","".padEnd),"pop,reverse,shift,keys,values,entries,indexOf,every,some,forEach,map,filter,find,findIndex,includes,join,slice,concat,push,splice,unshift,sort,lastIndexOf,reduce,reduceRight,copyWithin,fill".split(",").forEach(function(t){[][t]&&n(Array,t,Function.call.bind([][t]))})}).call(n,function(){return this}())},function(L,t){(function(t){!function(t){"use strict";function o(t,n,r,e){var o,u,c,f,i=n&&n.prototype instanceof h?n:h,a=Object.create(i.prototype),s=new p(e||[]);return a._invoke=(o=t,u=r,c=s,f=_,function(t,n){if(f===E)throw new Error("Generator is already running");if(f===M){if("throw"===t)throw n;return d()}for(c.method=t,c.arg=n;;){var r=c.delegate;if(r){var e=v(r,c);if(e){if(e===P)continue;return e}}if("next"===c.method)c.sent=c._sent=c.arg;else if("throw"===c.method){if(f===_)throw f=M,c.arg;c.dispatchException(c.arg)}else"return"===c.method&&c.abrupt("return",c.arg);f=E;var i=l(o,u,c);if("normal"===i.type){if(f=c.done?M:O,i.arg===P)continue;return{value:i.arg,done:c.done}}"throw"===i.type&&(f=M,c.method="throw",c.arg=i.arg)}}),a}function l(t,n,r){try{return{type:"normal",arg:t.call(n,r)}}catch(t){return{type:"throw",arg:t}}}function h(){}function r(){}function n(){}function e(t){["next","throw","return"].forEach(function(n){t[n]=function(t){return this._invoke(n,t)}})}function u(c){function f(t,n,r,e){var i=l(c[t],c,n);if("throw"!==i.type){var o=i.arg,u=o.value;return u&&"object"==typeof u&&y.call(u,"__await")?Promise.resolve(u.__await).then(function(t){f("next",t,r,e)},function(t){f("throw",t,r,e)}):Promise.resolve(u).then(function(t){o.value=t,r(o)},e)}e(i.arg)}var n;"object"==typeof t.process&&t.process.domain&&(f=t.process.domain.bind(f)),this._invoke=function(r,e){function t(){return new Promise(function(t,n){f(r,e,t,n)})}return n=n?n.then(t,t):t()}}function v(t,n){var r=t.iterator[n.method];if(r===a){if(n.delegate=null,"throw"===n.method){if(t.iterator.return&&(n.method="return",n.arg=a,v(t,n),"throw"===n.method))return P;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return P}var e=l(r,t.iterator,n.arg);if("throw"===e.type)return n.method="throw",n.arg=e.arg,n.delegate=null,P;var i=e.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=a),n.delegate=null,P):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,P)}function i(t){var n={tryLoc:t[0]};1 in t&&(n.catchLoc=t[1]),2 in t&&(n.finallyLoc=t[2],n.afterLoc=t[3]),this.tryEntries.push(n)}function c(t){var n=t.completion||{};n.type="normal",delete n.arg,t.completion=n}function p(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(i,this),this.reset(!0)}function f(n){if(n){var t=n[b];if(t)return t.call(n);if("function"==typeof n.next)return n;if(!isNaN(n.length)){var r=-1,e=function t(){for(;++r<n.length;)if(y.call(n,r))return t.value=n[r],t.done=!1,t;return t.value=a,t.done=!0,t};return e.next=e}}return{next:d}}function d(){return{value:a,done:!0}}var a,s=Object.prototype,y=s.hasOwnProperty,g="function"==typeof Symbol?Symbol:{},b=g.iterator||"@@iterator",x=g.asyncIterator||"@@asyncIterator",m=g.toStringTag||"@@toStringTag",S="object"==typeof L,w=t.regeneratorRuntime;if(w)S&&(L.exports=w);else{(w=t.regeneratorRuntime=S?L.exports:{}).wrap=o;var _="suspendedStart",O="suspendedYield",E="executing",M="completed",P={},j={};j[b]=function(){return this};var F=Object.getPrototypeOf,A=F&&F(F(f([])));A&&A!==s&&y.call(A,b)&&(j=A);var I=n.prototype=h.prototype=Object.create(j);r.prototype=I.constructor=n,n.constructor=r,n[m]=r.displayName="GeneratorFunction",w.isGeneratorFunction=function(t){var n="function"==typeof t&&t.constructor;return!!n&&(n===r||"GeneratorFunction"===(n.displayName||n.name))},w.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,n):(t.__proto__=n,m in t||(t[m]="GeneratorFunction")),t.prototype=Object.create(I),t},w.awrap=function(t){return{__await:t}},e(u.prototype),u.prototype[x]=function(){return this},w.AsyncIterator=u,w.async=function(t,n,r,e){var i=new u(o(t,n,r,e));return w.isGeneratorFunction(n)?i:i.next().then(function(t){return t.done?t.value:i.next()})},e(I),I[m]="Generator",I[b]=function(){return this},I.toString=function(){return"[object Generator]"},w.keys=function(r){var e=[];for(var t in r)e.push(t);return e.reverse(),function t(){for(;e.length;){var n=e.pop();if(n in r)return t.value=n,t.done=!1,t}return t.done=!0,t}},w.values=f,p.prototype={constructor:p,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=a,this.done=!1,this.delegate=null,this.method="next",this.arg=a,this.tryEntries.forEach(c),!t)for(var n in this)"t"===n.charAt(0)&&y.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=a)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(r){function t(t,n){return o.type="throw",o.arg=r,e.next=t,n&&(e.method="next",e.arg=a),!!n}if(this.done)throw r;for(var e=this,n=this.tryEntries.length-1;0<=n;--n){var i=this.tryEntries[n],o=i.completion;if("root"===i.tryLoc)return t("end");if(i.tryLoc<=this.prev){var u=y.call(i,"catchLoc"),c=y.call(i,"finallyLoc");if(u&&c){if(this.prev<i.catchLoc)return t(i.catchLoc,!0);if(this.prev<i.finallyLoc)return t(i.finallyLoc)}else if(u){if(this.prev<i.catchLoc)return t(i.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return t(i.finallyLoc)}}}},abrupt:function(t,n){for(var r=this.tryEntries.length-1;0<=r;--r){var e=this.tryEntries[r];if(e.tryLoc<=this.prev&&y.call(e,"finallyLoc")&&this.prev<e.finallyLoc){var i=e;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=n&&n<=i.finallyLoc&&(i=null);var o=i?i.completion:{};return o.type=t,o.arg=n,i?(this.method="next",this.next=i.finallyLoc,P):this.complete(o)},complete:function(t,n){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&n&&(this.next=n),P},finish:function(t){for(var n=this.tryEntries.length-1;0<=n;--n){var r=this.tryEntries[n];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),c(r),P}},catch:function(t){for(var n=this.tryEntries.length-1;0<=n;--n){var r=this.tryEntries[n];if(r.tryLoc===t){var e=r.completion;if("throw"===e.type){var i=e.arg;c(r)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:f(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=a),P}}}}("object"==typeof t?t:"object"==typeof window?window:"object"==typeof self?self:this)}).call(t,function(){return this}())},,function(t,n,r){r(221),t.exports=r(46).RegExp.escape},,,,function(t,n,r){var e=r(5),i=r(123),o=r(7)("species");t.exports=function(t){var n;return i(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!i(n.prototype)||(n=void 0),e(n)&&(null===(n=n[o])&&(n=void 0))),void 0===n?Array:n}},function(t,n,r){"use strict";var e=r(4),i=Date.prototype.getTime,o=Date.prototype.toISOString,u=function(t){return 9<t?t:"0"+t};t.exports=e(function(){return"0385-07-25T07:06:39.999Z"!=o.call(new Date(-5e13-1))})||!e(function(){o.call(new Date(NaN))})?function(){if(!isFinite(i.call(this)))throw RangeError("Invalid time value");var t=this,n=t.getUTCFullYear(),r=t.getUTCMilliseconds(),e=n<0?"-":9999<n?"+":"";return e+("00000"+Math.abs(n)).slice(e?-6:-4)+"-"+u(t.getUTCMonth()+1)+"-"+u(t.getUTCDate())+"T"+u(t.getUTCHours())+":"+u(t.getUTCMinutes())+":"+u(t.getUTCSeconds())+"."+(99<r?r:"0"+u(r))+"Z"}:o},function(t,n,r){"use strict";var e=r(2),i=r(53);t.exports=function(t){if("string"!==t&&"number"!==t&&"default"!==t)throw TypeError("Incorrect hint");return i(e(this),"number"!=t)}},function(t,n,r){var c=r(74),f=r(127),a=r(117);t.exports=function(t){var n=c(t),r=f.f;if(r)for(var e,i=r(t),o=a.f,u=0;i.length>u;)o.call(t,e=i[u++])&&n.push(e);return n}},function(t,n,r){t.exports=r(118)("native-function-to-string",Function.toString)},function(t,n){t.exports=function(n,r){var e=r===Object(r)?function(t){return r[t]}:r;return function(t){return String(t).replace(n,e)}}},function(t,n,r){var e=r(1),i=r(220)(/[\\^$*+?.()|[\]{}]/g,"\\$&");e(e.S,"RegExp",{escape:function(t){return i(t)}})},function(t,n,r){var e=r(1);e(e.P,"Array",{copyWithin:r(166)}),r(67)("copyWithin")},function(t,n,r){"use strict";var e=r(1),i=r(50)(4);e(e.P+e.F*!r(48)([].every,!0),"Array",{every:function(t){return i(this,t,arguments[1])}})},function(t,n,r){var e=r(1);e(e.P,"Array",{fill:r(137)}),r(67)("fill")},function(t,n,r){"use strict";var e=r(1),i=r(50)(2);e(e.P+e.F*!r(48)([].filter,!0),"Array",{filter:function(t){return i(this,t,arguments[1])}})},function(t,n,r){"use strict";var e=r(1),i=r(50)(6),o="findIndex",u=!0;o in[]&&Array(1)[o](function(){u=!1}),e(e.P+e.F*u,"Array",{findIndex:function(t){return i(this,t,1<arguments.length?arguments[1]:void 0)}}),r(67)(o)},function(t,n,r){"use strict";var e=r(1),i=r(50)(5),o="find",u=!0;o in[]&&Array(1)[o](function(){u=!1}),e(e.P+e.F*u,"Array",{find:function(t){return i(this,t,1<arguments.length?arguments[1]:void 0)}}),r(67)(o)},function(t,n,r){"use strict";var e=r(1),i=r(50)(0),o=r(48)([].forEach,!0);e(e.P+e.F*!o,"Array",{forEach:function(t){return i(this,t,arguments[1])}})},function(t,n,r){"use strict";var h=r(47),e=r(1),v=r(17),p=r(177),d=r(145),y=r(8),g=r(139),b=r(161);e(e.S+e.F*!r(125)(function(t){Array.from(t)}),"Array",{from:function(t){var n,r,e,i,o=v(t),u="function"==typeof this?this:Array,c=arguments.length,f=1<c?arguments[1]:void 0,a=void 0!==f,s=0,l=b(o);if(a&&(f=h(f,2<c?arguments[2]:void 0,2)),null==l||u==Array&&d(l))for(r=new u(n=y(o.length));s<n;s++)g(r,s,a?f(o[s],s):o[s]);else for(i=l.call(o),r=new u;!(e=i.next()).done;s++)g(r,s,a?p(i,f,[e.value,s],!0):e.value);return r.length=s,r}})},function(t,n,r){"use strict";var e=r(1),i=r(120)(!1),o=[].indexOf,u=!!o&&1/[1].indexOf(1,-0)<0;e(e.P+e.F*(u||!r(48)(o)),"Array",{indexOf:function(t){return u?o.apply(this,arguments)||0:i(this,t,arguments[1])}})},function(t,n,r){var e=r(1);e(e.S,"Array",{isArray:r(123)})},function(t,n,r){"use strict";var e=r(1),i=r(33),o=[].join;e(e.P+e.F*(r(116)!=Object||!r(48)(o)),"Array",{join:function(t){return o.call(i(this),void 0===t?",":t)}})},function(t,n,r){"use strict";var e=r(1),i=r(33),o=r(49),u=r(8),c=[].lastIndexOf,f=!!c&&1/[1].lastIndexOf(1,-0)<0;e(e.P+e.F*(f||!r(48)(c)),"Array",{lastIndexOf:function(t){if(f)return c.apply(this,arguments)||0;var n=i(this),r=u(n.length),e=r-1;for(1<arguments.length&&(e=Math.min(e,o(arguments[1]))),e<0&&(e=r+e);0<=e;e--)if(e in n&&n[e]===t)return e||0;return-1}})},function(t,n,r){"use strict";var e=r(1),i=r(50)(1);e(e.P+e.F*!r(48)([].map,!0),"Array",{map:function(t){return i(this,t,arguments[1])}})},function(t,n,r){"use strict";var e=r(1),i=r(139);e(e.S+e.F*r(4)(function(){function t(){}return!(Array.of.call(t)instanceof t)}),"Array",{of:function(){for(var t=0,n=arguments.length,r=new("function"==typeof this?this:Array)(n);t<n;)i(r,t,arguments[t++]);return r.length=n,r}})},function(t,n,r){"use strict";var e=r(1),i=r(168);e(e.P+e.F*!r(48)([].reduceRight,!0),"Array",{reduceRight:function(t){return i(this,t,arguments.length,arguments[1],!0)}})},function(t,n,r){"use strict";var e=r(1),i=r(168);e(e.P+e.F*!r(48)([].reduce,!0),"Array",{reduce:function(t){return i(this,t,arguments.length,arguments[1],!1)}})},function(t,n,r){"use strict";var e=r(1),i=r(143),a=r(45),s=r(78),l=r(8),h=[].slice;e(e.P+e.F*r(4)(function(){i&&h.call(i)}),"Array",{slice:function(t,n){var r=l(this.length),e=a(this);if(n=void 0===n?r:n,"Array"==e)return h.call(this,t,n);for(var i=s(t,r),o=s(n,r),u=l(o-i),c=new Array(u),f=0;f<u;f++)c[f]="String"==e?this.charAt(i+f):this[i+f];return c}})},function(t,n,r){"use strict";var e=r(1),i=r(50)(3);e(e.P+e.F*!r(48)([].some,!0),"Array",{some:function(t){return i(this,t,arguments[1])}})},function(t,n,r){"use strict";var e=r(1),i=r(21),o=r(17),u=r(4),c=[].sort,f=[1,2,3];e(e.P+e.F*(u(function(){f.sort(void 0)})||!u(function(){f.sort(null)})||!r(48)(c)),"Array",{sort:function(t){return void 0===t?c.call(o(this)):c.call(o(this),i(t))}})},function(t,n,r){r(77)("Array")},function(t,n,r){var e=r(1);e(e.S,"Date",{now:function(){return(new Date).getTime()}})},function(t,n,r){var e=r(1),i=r(216);e(e.P+e.F*(Date.prototype.toISOString!==i),"Date",{toISOString:i})},function(t,n,r){"use strict";var e=r(1),i=r(17),o=r(53);e(e.P+e.F*r(4)(function(){return null!==new Date(NaN).toJSON()||1!==Date.prototype.toJSON.call({toISOString:function(){return 1}})}),"Date",{toJSON:function(t){var n=i(this),r=o(n);return"number"!=typeof r||isFinite(r)?n.toISOString():null}})},function(t,n,r){var e=r(7)("toPrimitive"),i=Date.prototype;e in i||r(26)(i,e,r(217))},function(t,n,r){var e=Date.prototype,i="Invalid Date",o="toString",u=e[o],c=e.getTime;new Date(NaN)+""!=i&&r(27)(e,o,function(){var t=c.call(this);return t==t?u.call(this):i})},function(t,n,r){var e=r(1);e(e.P,"Function",{bind:r(169)})},function(t,n,r){"use strict";var e=r(5),i=r(32),o=r(7)("hasInstance"),u=Function.prototype;o in u||r(11).f(u,o,{value:function(t){if("function"!=typeof this||!e(t))return!1;if(!e(this.prototype))return t instanceof this;for(;t=i(t);)if(this.prototype===t)return!0;return!1}})},function(t,n,r){var e=r(11).f,i=Function.prototype,o=/^\s*function ([^ (]*)/;"name"in i||r(10)&&e(i,"name",{configurable:!0,get:function(){try{return(""+this).match(o)[1]}catch(t){return""}}})},function(t,n,r){var e=r(1),i=r(180),o=Math.sqrt,u=Math.acosh;e(e.S+e.F*!(u&&710==Math.floor(u(Number.MAX_VALUE))&&u(1/0)==1/0),"Math",{acosh:function(t){return(t=+t)<1?NaN:94906265.62425156<t?Math.log(t)+Math.LN2:i(t-1+o(t-1)*o(t+1))}})},function(t,n,r){var e=r(1),i=Math.asinh;e(e.S+e.F*!(i&&0<1/i(0)),"Math",{asinh:function t(n){return isFinite(n=+n)&&0!=n?n<0?-t(-n):Math.log(n+Math.sqrt(n*n+1)):n}})},function(t,n,r){var e=r(1),i=Math.atanh;e(e.S+e.F*!(i&&1/i(-0)<0),"Math",{atanh:function(t){return 0==(t=+t)?t:Math.log((1+t)/(1-t))/2}})},function(t,n,r){var e=r(1),i=r(149);e(e.S,"Math",{cbrt:function(t){return i(t=+t)*Math.pow(Math.abs(t),1/3)}})},function(t,n,r){var e=r(1);e(e.S,"Math",{clz32:function(t){return(t>>>=0)?31-Math.floor(Math.log(t+.5)*Math.LOG2E):32}})},function(t,n,r){var e=r(1),i=Math.exp;e(e.S,"Math",{cosh:function(t){return(i(t=+t)+i(-t))/2}})},function(t,n,r){var e=r(1),i=r(148);e(e.S+e.F*(i!=Math.expm1),"Math",{expm1:i})},function(t,n,r){var e=r(1);e(e.S,"Math",{fround:r(179)})},function(t,n,r){var e=r(1),f=Math.abs;e(e.S,"Math",{hypot:function(t,n){for(var r,e,i=0,o=0,u=arguments.length,c=0;o<u;)c<(r=f(arguments[o++]))?(i=i*(e=c/r)*e+1,c=r):0<r?i+=(e=r/c)*e:i+=r;return c===1/0?1/0:c*Math.sqrt(i)}})},function(t,n,r){var e=r(1),i=Math.imul;e(e.S+e.F*r(4)(function(){return-5!=i(4294967295,5)||2!=i.length}),"Math",{imul:function(t,n){var r=65535,e=+t,i=+n,o=r&e,u=r&i;return 0|o*u+((r&e>>>16)*u+o*(r&i>>>16)<<16>>>0)}})},function(t,n,r){var e=r(1);e(e.S,"Math",{log10:function(t){return Math.log(t)*Math.LOG10E}})},function(t,n,r){var e=r(1);e(e.S,"Math",{log1p:r(180)})},function(t,n,r){var e=r(1);e(e.S,"Math",{log2:function(t){return Math.log(t)/Math.LN2}})},function(t,n,r){var e=r(1);e(e.S,"Math",{sign:r(149)})},function(t,n,r){var e=r(1),i=r(148),o=Math.exp;e(e.S+e.F*r(4)(function(){return-2e-17!=!Math.sinh(-2e-17)}),"Math",{sinh:function(t){return Math.abs(t=+t)<1?(i(t)-i(-t))/2:(o(t-1)-o(-t-1))*(Math.E/2)}})},function(t,n,r){var e=r(1),i=r(148),o=Math.exp;e(e.S,"Math",{tanh:function(t){var n=i(t=+t),r=i(-t);return n==1/0?1:r==1/0?-1:(n-r)/(o(t)+o(-t))}})},function(t,n,r){var e=r(1);e(e.S,"Math",{trunc:function(t){return(0<t?Math.floor:Math.ceil)(t)}})},function(t,n,r){"use strict";var e=r(3),i=r(30),o=r(45),u=r(144),s=r(53),c=r(4),f=r(73).f,a=r(31).f,l=r(11).f,h=r(84).trim,v="Number",p=e[v],d=p,y=p.prototype,g=o(r(72)(y))==v,b="trim"in String.prototype,x=function(t){var n=s(t,!1);if("string"==typeof n&&2<n.length){var r,e,i,o=(n=b?n.trim():h(n,3)).charCodeAt(0);if(43===o||45===o){if(88===(r=n.charCodeAt(2))||120===r)return NaN}else if(48===o){switch(n.charCodeAt(1)){case 66:case 98:e=2,i=49;break;case 79:case 111:e=8,i=55;break;default:return+n}for(var u,c=n.slice(2),f=0,a=c.length;f<a;f++)if((u=c.charCodeAt(f))<48||i<u)return NaN;return parseInt(c,e)}}return+n};if(!p(" 0o1")||!p("0b1")||p("+0x1")){p=function(t){var n=arguments.length<1?0:t,r=this;return r instanceof p&&(g?c(function(){y.valueOf.call(r)}):o(r)!=v)?u(new d(x(n)),r,p):x(n)};for(var m,S=r(10)?f(d):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),w=0;S.length>w;w++)i(d,m=S[w])&&!i(p,m)&&l(p,m,a(d,m));(p.prototype=y).constructor=p,r(27)(e,v,p)}},function(t,n,r){var e=r(1);e(e.S,"Number",{EPSILON:Math.pow(2,-52)})},function(t,n,r){var e=r(1),i=r(3).isFinite;e(e.S,"Number",{isFinite:function(t){return"number"==typeof t&&i(t)}})},function(t,n,r){var e=r(1);e(e.S,"Number",{isInteger:r(176)})},function(t,n,r){var e=r(1);e(e.S,"Number",{isNaN:function(t){return t!=t}})},function(t,n,r){var e=r(1),i=r(176),o=Math.abs;e(e.S,"Number",{isSafeInteger:function(t){return i(t)&&o(t)<=9007199254740991}})},function(t,n,r){var e=r(1);e(e.S,"Number",{MAX_SAFE_INTEGER:9007199254740991})},function(t,n,r){var e=r(1);e(e.S,"Number",{MIN_SAFE_INTEGER:-9007199254740991})},function(t,n,r){var e=r(1),i=r(188);e(e.S+e.F*(Number.parseFloat!=i),"Number",{parseFloat:i})},function(t,n,r){var e=r(1),i=r(189);e(e.S+e.F*(Number.parseInt!=i),"Number",{parseInt:i})},function(t,n,r){"use strict";var e=r(1),a=r(49),s=r(165),l=r(156),i=1..toFixed,o=Math.floor,u=[0,0,0,0,0,0],h="Number.toFixed: incorrect invocation!",v=function(t,n){for(var r=-1,e=n;++r<6;)e+=t*u[r],u[r]=e%1e7,e=o(e/1e7)},p=function(t){for(var n=6,r=0;0<=--n;)r+=u[n],u[n]=o(r/t),r=r%t*1e7},d=function(){for(var t=6,n="";0<=--t;)if(""!==n||0===t||0!==u[t]){var r=String(u[t]);n=""===n?r:n+l.call("0",7-r.length)+r}return n},y=function(t,n,r){return 0===n?r:n%2==1?y(t,n-1,r*t):y(t*t,n/2,r)};e(e.P+e.F*(!!i&&("0.000"!==8e-5.toFixed(3)||"1"!==.9.toFixed(0)||"1.25"!==1.255.toFixed(2)||"1000000000000000128"!==(0xde0b6b3a7640080).toFixed(0))||!r(4)(function(){i.call({})})),"Number",{toFixed:function(t){var n,r,e,i,o=s(this,h),u=a(t),c="",f="0";if(u<0||20<u)throw RangeError(h);if(o!=o)return"NaN";if(o<=-1e21||1e21<=o)return String(o);if(o<0&&(c="-",o=-o),1e-21<o)if(r=(n=function(t){for(var n=0,r=t;4096<=r;)n+=12,r/=4096;for(;2<=r;)n+=1,r/=2;return n}(o*y(2,69,1))-69)<0?o*y(2,-n,1):o/y(2,n,1),r*=4503599627370496,0<(n=52-n)){for(v(0,r),e=u;7<=e;)v(1e7,0),e-=7;for(v(y(10,e,1),0),e=n-1;23<=e;)p(1<<23),e-=23;p(1<<e),v(1,1),p(2),f=d()}else v(0,r),v(1<<-n,0),f=d()+l.call("0",u);return f=0<u?c+((i=f.length)<=u?"0."+l.call("0",u-i)+f:f.slice(0,i-u)+"."+f.slice(i-u)):c+f}})},function(t,n,r){"use strict";var e=r(1),i=r(4),o=r(165),u=1..toPrecision;e(e.P+e.F*(i(function(){return"1"!==u.call(1,void 0)})||!i(function(){u.call({})})),"Number",{toPrecision:function(t){var n=o(this,"Number#toPrecision: incorrect invocation!");return void 0===t?u.call(n):u.call(n,t)}})},function(t,n,r){var e=r(1);e(e.S+e.F,"Object",{assign:r(182)})},function(t,n,r){var e=r(1);e(e.S,"Object",{create:r(72)})},function(t,n,r){var e=r(1);e(e.S+e.F*!r(10),"Object",{defineProperties:r(183)})},function(t,n,r){var e=r(1);e(e.S+e.F*!r(10),"Object",{defineProperty:r(11).f})},function(t,n,r){var e=r(5),i=r(69).onFreeze;r(52)("freeze",function(n){return function(t){return n&&e(t)?n(i(t)):t}})},function(t,n,r){var e=r(33),i=r(31).f;r(52)("getOwnPropertyDescriptor",function(){return function(t,n){return i(e(t),n)}})},function(t,n,r){r(52)("getOwnPropertyNames",function(){return r(184).f})},function(t,n,r){var e=r(17),i=r(32);r(52)("getPrototypeOf",function(){return function(t){return i(e(t))}})},function(t,n,r){var e=r(5);r(52)("isExtensible",function(n){return function(t){return!!e(t)&&(!n||n(t))}})},function(t,n,r){var e=r(5);r(52)("isFrozen",function(n){return function(t){return!e(t)||!!n&&n(t)}})},function(t,n,r){var e=r(5);r(52)("isSealed",function(n){return function(t){return!e(t)||!!n&&n(t)}})},function(t,n,r){var e=r(1);e(e.S,"Object",{is:r(192)})},function(t,n,r){var e=r(17),i=r(74);r(52)("keys",function(){return function(t){return i(e(t))}})},function(t,n,r){var e=r(5),i=r(69).onFreeze;r(52)("preventExtensions",function(n){return function(t){return n&&e(t)?n(i(t)):t}})},function(t,n,r){var e=r(5),i=r(69).onFreeze;r(52)("seal",function(n){return function(t){return n&&e(t)?n(i(t)):t}})},function(t,n,r){var e=r(1);e(e.S,"Object",{setPrototypeOf:r(153).set})},function(t,n,r){"use strict";var e=r(81),i={};i[r(7)("toStringTag")]="z",i+""!="[object z]"&&r(27)(Object.prototype,"toString",function(){return"[object "+e(this)+"]"},!0)},function(t,n,r){var e=r(1),i=r(188);e(e.G+e.F*(parseFloat!=i),{parseFloat:i})},function(t,n,r){var e=r(1),i=r(189);e(e.G+e.F*(parseInt!=i),{parseInt:i})},function(t,n,r){"use strict";var e,i,o,u,c=r(68),f=r(3),a=r(47),s=r(81),l=r(1),h=r(5),v=r(21),p=r(70),d=r(71),y=r(119),g=r(158).set,b=r(150)(),x=r(151),m=r(190),S=r(133),w=r(191),_="Promise",O=f.TypeError,E=f.process,M=E&&E.versions,P=M&&M.v8||"",j=f[_],F="process"==s(E),A=function(){},I=i=x.f,L=!!function(){try{var t=j.resolve(1),n=(t.constructor={})[r(7)("species")]=function(t){t(A,A)};return(F||"function"==typeof PromiseRejectionEvent)&&t.then(A)instanceof n&&0!==P.indexOf("6.6")&&-1===S.indexOf("Chrome/66")}catch(t){}}(),N=function(t){var n;return!(!h(t)||"function"!=typeof(n=t.then))&&n},T=function(s,r){if(!s._n){s._n=!0;var e=s._c;b(function(){for(var f=s._v,a=1==s._s,t=0,n=function(t){var n,r,e,i=a?t.ok:t.fail,o=t.resolve,u=t.reject,c=t.domain;try{i?(a||(2==s._h&&C(s),s._h=1),!0===i?n=f:(c&&c.enter(),n=i(f),c&&(c.exit(),e=!0)),n===t.promise?u(O("Promise-chain cycle")):(r=N(n))?r.call(n,o,u):o(n)):u(f)}catch(t){c&&!e&&c.exit(),u(t)}};e.length>t;)n(e[t++]);s._c=[],s._n=!1,r&&!s._h&&k(s)})}},k=function(o){g.call(f,function(){var t,n,r,e=o._v,i=R(o);if(i&&(t=m(function(){F?E.emit("unhandledRejection",e,o):(n=f.onunhandledrejection)?n({promise:o,reason:e}):(r=f.console)&&r.error&&r.error("Unhandled promise rejection",e)}),o._h=F||R(o)?2:1),o._a=void 0,i&&t.e)throw t.v})},R=function(t){return 1!==t._h&&0===(t._a||t._c).length},C=function(n){g.call(f,function(){var t;F?E.emit("rejectionHandled",n):(t=f.onrejectionhandled)&&t({promise:n,reason:n._v})})},D=function(t){var n=this;n._d||(n._d=!0,(n=n._w||n)._v=t,n._s=2,n._a||(n._a=n._c.slice()),T(n,!0))},G=function(t){var r,e=this;if(!e._d){e._d=!0,e=e._w||e;try{if(e===t)throw O("Promise can't be resolved itself");(r=N(t))?b(function(){var n={_w:e,_d:!1};try{r.call(t,a(G,n,1),a(D,n,1))}catch(t){D.call(n,t)}}):(e._v=t,e._s=1,T(e,!1))}catch(t){D.call({_w:e,_d:!1},t)}}};L||(j=function(t){p(this,j,_,"_h"),v(t),e.call(this);try{t(a(G,this,1),a(D,this,1))}catch(t){D.call(this,t)}},(e=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=r(76)(j.prototype,{then:function(t,n){var r=I(y(this,j));return r.ok="function"!=typeof t||t,r.fail="function"==typeof n&&n,r.domain=F?E.domain:void 0,this._c.push(r),this._a&&this._a.push(r),this._s&&T(this,!1),r.promise},catch:function(t){return this.then(void 0,t)}}),o=function(){var t=new e;this.promise=t,this.resolve=a(G,t,1),this.reject=a(D,t,1)},x.f=I=function(t){return t===j||t===u?new o(t):i(t)}),l(l.G+l.W+l.F*!L,{Promise:j}),r(83)(j,_),r(77)(_),u=r(46)[_],l(l.S+l.F*!L,_,{reject:function(t){var n=I(this);return(0,n.reject)(t),n.promise}}),l(l.S+l.F*(c||!L),_,{resolve:function(t){return w(c&&this===u?j:this,t)}}),l(l.S+l.F*!(L&&r(125)(function(t){j.all(t).catch(A)})),_,{all:function(t){var u=this,n=I(u),c=n.resolve,f=n.reject,r=m(function(){var e=[],i=0,o=1;d(t,!1,function(t){var n=i++,r=!1;e.push(void 0),o++,u.resolve(t).then(function(t){r||(r=!0,e[n]=t,--o||c(e))},f)}),--o||c(e)});return r.e&&f(r.v),n.promise},race:function(t){var n=this,r=I(n),e=r.reject,i=m(function(){d(t,!1,function(t){n.resolve(t).then(r.resolve,e)})});return i.e&&e(i.v),r.promise}})},function(t,n,r){var e=r(1),o=r(21),u=r(2),c=(r(3).Reflect||{}).apply,f=Function.apply;e(e.S+e.F*!r(4)(function(){c(function(){})}),"Reflect",{apply:function(t,n,r){var e=o(t),i=u(r);return c?c(e,n,i):f.call(e,n,i)}})},function(t,n,r){var e=r(1),c=r(72),f=r(21),a=r(2),s=r(5),i=r(4),l=r(169),h=(r(3).Reflect||{}).construct,v=i(function(){function t(){}return!(h(function(){},[],t)instanceof t)}),p=!i(function(){h(function(){})});e(e.S+e.F*(v||p),"Reflect",{construct:function(t,n){f(t),a(n);var r=arguments.length<3?t:f(arguments[2]);if(p&&!v)return h(t,n,r);if(t==r){switch(n.length){case 0:return new t;case 1:return new t(n[0]);case 2:return new t(n[0],n[1]);case 3:return new t(n[0],n[1],n[2]);case 4:return new t(n[0],n[1],n[2],n[3])}var e=[null];return e.push.apply(e,n),new(l.apply(t,e))}var i=r.prototype,o=c(s(i)?i:Object.prototype),u=Function.apply.call(t,o,n);return s(u)?u:o}})},function(t,n,r){var e=r(11),i=r(1),o=r(2),u=r(53);i(i.S+i.F*r(4)(function(){Reflect.defineProperty(e.f({},1,{value:1}),1,{value:2})}),"Reflect",{defineProperty:function(t,n,r){o(t),n=u(n,!0),o(r);try{return e.f(t,n,r),!0}catch(t){return!1}}})},function(t,n,r){var e=r(1),i=r(31).f,o=r(2);e(e.S,"Reflect",{deleteProperty:function(t,n){var r=i(o(t),n);return!(r&&!r.configurable)&&delete t[n]}})},function(t,n,r){"use strict";var e=r(1),i=r(2),o=function(t){this._t=i(t),this._i=0;var n,r=this._k=[];for(n in t)r.push(n)};r(146)(o,"Object",function(){var t,n=this._k;do{if(this._i>=n.length)return{value:void 0,done:!0}}while(!((t=n[this._i++])in this._t));return{value:t,done:!1}}),e(e.S,"Reflect",{enumerate:function(t){return new o(t)}})},function(t,n,r){var e=r(31),i=r(1),o=r(2);i(i.S,"Reflect",{getOwnPropertyDescriptor:function(t,n){return e.f(o(t),n)}})},function(t,n,r){var e=r(1),i=r(32),o=r(2);e(e.S,"Reflect",{getPrototypeOf:function(t){return i(o(t))}})},function(t,n,r){var u=r(31),c=r(32),f=r(30),e=r(1),a=r(5),s=r(2);e(e.S,"Reflect",{get:function t(n,r){var e,i,o=arguments.length<3?n:arguments[2];return s(n)===o?n[r]:(e=u.f(n,r))?f(e,"value")?e.value:void 0!==e.get?e.get.call(o):void 0:a(i=c(n))?t(i,r,o):void 0}})},function(t,n,r){var e=r(1);e(e.S,"Reflect",{has:function(t,n){return n in t}})},function(t,n,r){var e=r(1),i=r(2),o=Object.isExtensible;e(e.S,"Reflect",{isExtensible:function(t){return i(t),!o||o(t)}})},function(t,n,r){var e=r(1);e(e.S,"Reflect",{ownKeys:r(187)})},function(t,n,r){var e=r(1),i=r(2),o=Object.preventExtensions;e(e.S,"Reflect",{preventExtensions:function(t){i(t);try{return o&&o(t),!0}catch(t){return!1}}})},function(t,n,r){var e=r(1),i=r(153);i&&e(e.S,"Reflect",{setPrototypeOf:function(t,n){i.check(t,n);try{return i.set(t,n),!0}catch(t){return!1}}})},function(t,n,r){var f=r(11),a=r(31),s=r(32),l=r(30),e=r(1),h=r(75),v=r(2),p=r(5);e(e.S,"Reflect",{set:function t(n,r,e){var i,o,u=arguments.length<4?n:arguments[3],c=a.f(v(n),r);if(!c){if(p(o=s(n)))return t(o,r,e,u);c=h(0)}if(l(c,"value")){if(!1===c.writable||!p(u))return!1;if(i=a.f(u,r)){if(i.get||i.set||!1===i.writable)return!1;i.value=e,f.f(u,r,i)}else f.f(u,r,h(0,e));return!0}return void 0!==c.set&&(c.set.call(u,e),!0)}})},function(t,n,r){var e=r(3),o=r(144),i=r(11).f,u=r(73).f,c=r(124),f=r(115),a=e.RegExp,s=a,l=a.prototype,h=/a/g,v=/a/g,p=new a(h)!==h;if(r(10)&&(!p||r(4)(function(){return v[r(7)("match")]=!1,a(h)!=h||a(v)==v||"/a/i"!=a(h,"i")}))){a=function(t,n){var r=this instanceof a,e=c(t),i=void 0===n;return!r&&e&&t.constructor===a&&i?t:o(p?new s(e&&!i?t.source:t,n):s((e=t instanceof a)?t.source:t,e&&i?f.call(t):n),r?this:l,a)};for(var d=function(n){n in a||i(a,n,{configurable:!0,get:function(){return s[n]},set:function(t){s[n]=t}})},y=u(s),g=0;y.length>g;)d(y[g++]);(l.constructor=a).prototype=l,r(27)(e,"RegExp",a)}r(77)("RegExp")},function(t,n,r){"use strict";var l=r(2),h=r(8),v=r(136),p=r(128);r(122)("match",1,function(e,i,a,s){return[function(t){var n=e(this),r=null==t?void 0:t[i];return void 0!==r?r.call(t,n):new RegExp(t)[i](String(n))},function(t){var n=s(a,t,this);if(n.done)return n.value;var r=l(t),e=String(this);if(!r.global)return p(r,e);for(var i,o=r.unicode,u=[],c=r.lastIndex=0;null!==(i=p(r,e));){var f=String(i[0]);""===(u[c]=f)&&(r.lastIndex=v(e,h(r.lastIndex),o)),c++}return 0===c?null:u}]})},function(t,n,r){"use strict";var O=r(2),e=r(17),E=r(8),M=r(49),P=r(136),j=r(128),F=Math.max,A=Math.min,h=Math.floor,v=/\$([$&`']|\d\d?|<[^>]*>)/g,p=/\$([$&`']|\d\d?)/g;r(122)("replace",2,function(i,o,S,w){function _(o,u,c,f,a,t){var s=c+o.length,l=f.length,n=p;return void 0!==a&&(a=e(a),n=v),S.call(t,n,function(t,n){var r;switch(n.charAt(0)){case"$":return"$";case"&":return o;case"`":return u.slice(0,c);case"'":return u.slice(s);case"<":r=a[n.slice(1,-1)];break;default:var e=+n;if(0===e)return t;if(l<e){var i=h(e/10);return 0===i?t:i<=l?void 0===f[i-1]?n.charAt(1):f[i-1]+n.charAt(1):t}r=f[e-1]}return void 0===r?"":r})}return[function(t,n){var r=i(this),e=null==t?void 0:t[o];return void 0!==e?e.call(t,r,n):S.call(String(r),t,n)},function(t,n){var r=w(S,t,this,n);if(r.done)return r.value;var e=O(t),i=String(this),o="function"==typeof n;o||(n=String(n));var u,c=e.global;if(c){var f=e.unicode;e.lastIndex=0}for(var a=[];;){var s=j(e,i);if(null===s)break;if(a.push(s),!c)break;""===String(s[0])&&(e.lastIndex=P(i,E(e.lastIndex),f))}for(var l="",h=0,v=0;v<a.length;v++){s=a[v];for(var p=String(s[0]),d=F(A(M(s.index),i.length),0),y=[],g=1;g<s.length;g++)y.push(void 0===(u=s[g])?u:String(u));var b=s.groups;if(o){var x=[p].concat(y,d,i);void 0!==b&&x.push(b);var m=String(n.apply(void 0,x))}else m=_(p,i,d,y,b,n);h<=d&&(l+=i.slice(h,d)+m,h=d+p.length)}return l+i.slice(h)}]})},function(t,n,r){"use strict";var f=r(2),a=r(192),s=r(128);r(122)("search",1,function(e,i,u,c){return[function(t){var n=e(this),r=null==t?void 0:t[i];return void 0!==r?r.call(t,n):new RegExp(t)[i](String(n))},function(t){var n=c(u,t,this);if(n.done)return n.value;var r=f(t),e=String(this),i=r.lastIndex;a(i,0)||(r.lastIndex=0);var o=s(r,e);return a(r.lastIndex,i)||(r.lastIndex=i),null===o?-1:o.index}]})},function(t,n,r){"use strict";var l=r(124),x=r(2),m=r(119),S=r(136),w=r(8),_=r(128),h=r(152),e=r(4),O=Math.min,v=[].push,u="split",p="length",d="lastIndex",E=4294967295,M=!e(function(){RegExp(E,"y")});r(122)("split",2,function(i,o,y,g){var b;return b="c"=="abbc"[u](/(b)*/)[1]||4!="test"[u](/(?:)/,-1)[p]||2!="ab"[u](/(?:ab)*/)[p]||4!="."[u](/(.?)(.?)/)[p]||1<"."[u](/()()/)[p]||""[u](/.?/)[p]?function(t,n){var r=String(this);if(void 0===t&&0===n)return[];if(!l(t))return y.call(r,t,n);for(var e,i,o,u=[],c=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),f=0,a=void 0===n?E:n>>>0,s=new RegExp(t.source,c+"g");(e=h.call(s,r))&&!(f<(i=s[d])&&(u.push(r.slice(f,e.index)),1<e[p]&&e.index<r[p]&&v.apply(u,e.slice(1)),o=e[0][p],f=i,u[p]>=a));)s[d]===e.index&&s[d]++;return f===r[p]?!o&&s.test("")||u.push(""):u.push(r.slice(f)),u[p]>a?u.slice(0,a):u}:"0"[u](void 0,0)[p]?function(t,n){return void 0===t&&0===n?[]:y.call(this,t,n)}:y,[function(t,n){var r=i(this),e=null==t?void 0:t[o];return void 0!==e?e.call(t,r,n):b.call(String(r),t,n)},function(t,n){var r=g(b,t,this,n,b!==y);if(r.done)return r.value;var e=x(t),i=String(this),o=m(e,RegExp),u=e.unicode,c=(e.ignoreCase?"i":"")+(e.multiline?"m":"")+(e.unicode?"u":"")+(M?"y":"g"),f=new o(M?e:"^(?:"+e.source+")",c),a=void 0===n?E:n>>>0;if(0===a)return[];if(0===i.length)return null===_(f,i)?[i]:[];for(var s=0,l=0,h=[];l<i.length;){f.lastIndex=M?l:0;var v,p=_(f,M?i:i.slice(l));if(null===p||(v=O(w(f.lastIndex+(M?0:l)),i.length))===s)l=S(i,l,u);else{if(h.push(i.slice(s,l)),h.length===a)return h;for(var d=1;d<=p.length-1;d++)if(h.push(p[d]),h.length===a)return h;l=s=v}}return h.push(i.slice(s)),h}]})},function(t,n,r){"use strict";r(198);var e=r(2),i=r(115),o=r(10),u="toString",c=/./[u],f=function(t){r(27)(RegExp.prototype,u,t,!0)};r(4)(function(){return"/a/b"!=c.call({source:"a",flags:"b"})})?f(function(){var t=e(this);return"/".concat(t.source,"/","flags"in t?t.flags:!o&&t instanceof RegExp?i.call(t):void 0)}):c.name!=u&&f(function(){return c.call(this)})},function(t,n,r){"use strict";r(28)("anchor",function(n){return function(t){return n(this,"a","name",t)}})},function(t,n,r){"use strict";r(28)("big",function(t){return function(){return t(this,"big","","")}})},function(t,n,r){"use strict";r(28)("blink",function(t){return function(){return t(this,"blink","","")}})},function(t,n,r){"use strict";r(28)("bold",function(t){return function(){return t(this,"b","","")}})},function(t,n,r){"use strict";var e=r(1),i=r(131)(!1);e(e.P,"String",{codePointAt:function(t){return i(this,t)}})},function(t,n,r){"use strict";var e=r(1),u=r(8),c=r(155),f="endsWith",a=""[f];e(e.P+e.F*r(142)(f),"String",{endsWith:function(t){var n=c(this,t,f),r=1<arguments.length?arguments[1]:void 0,e=u(n.length),i=void 0===r?e:Math.min(u(r),e),o=String(t);return a?a.call(n,o,i):n.slice(i-o.length,i)===o}})},function(t,n,r){"use strict";r(28)("fixed",function(t){return function(){return t(this,"tt","","")}})},function(t,n,r){"use strict";r(28)("fontcolor",function(n){return function(t){return n(this,"font","color",t)}})},function(t,n,r){"use strict";r(28)("fontsize",function(n){return function(t){return n(this,"font","size",t)}})},function(t,n,r){var e=r(1),o=r(78),u=String.fromCharCode,i=String.fromCodePoint;e(e.S+e.F*(!!i&&1!=i.length),"String",{fromCodePoint:function(t){for(var n,r=[],e=arguments.length,i=0;i<e;){if(n=+arguments[i++],o(n,1114111)!==n)throw RangeError(n+" is not a valid code point");r.push(n<65536?u(n):u(55296+((n-=65536)>>10),n%1024+56320))}return r.join("")}})},function(t,n,r){"use strict";var e=r(1),i=r(155);e(e.P+e.F*r(142)("includes"),"String",{includes:function(t){return!!~i(this,t,"includes").indexOf(t,1<arguments.length?arguments[1]:void 0)}})},function(t,n,r){"use strict";r(28)("italics",function(t){return function(){return t(this,"i","","")}})},function(t,n,r){"use strict";var e=r(131)(!0);r(147)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,r=this._i;return r>=n.length?{value:void 0,done:!0}:(t=e(n,r),this._i+=t.length,{value:t,done:!1})})},function(t,n,r){"use strict";r(28)("link",function(n){return function(t){return n(this,"a","href",t)}})},function(t,n,r){var e=r(1),u=r(33),c=r(8);e(e.S,"String",{raw:function(t){for(var n=u(t.raw),r=c(n.length),e=arguments.length,i=[],o=0;o<r;)i.push(String(n[o++])),o<e&&i.push(String(arguments[o]));return i.join("")}})},function(t,n,r){var e=r(1);e(e.P,"String",{repeat:r(156)})},function(t,n,r){"use strict";r(28)("small",function(t){return function(){return t(this,"small","","")}})},function(t,n,r){"use strict";var e=r(1),i=r(8),o=r(155),u="startsWith",c=""[u];e(e.P+e.F*r(142)(u),"String",{startsWith:function(t){var n=o(this,t,u),r=i(Math.min(1<arguments.length?arguments[1]:void 0,n.length)),e=String(t);return c?c.call(n,e,r):n.slice(r,r+e.length)===e}})},function(t,n,r){"use strict";r(28)("strike",function(t){return function(){return t(this,"strike","","")}})},function(t,n,r){"use strict";r(28)("sub",function(t){return function(){return t(this,"sub","","")}})},function(t,n,r){"use strict";r(28)("sup",function(t){return function(){return t(this,"sup","","")}})},function(t,n,r){"use strict";r(84)("trim",function(t){return function(){return t(this,3)}})},function(t,n,r){"use strict";var e=r(3),u=r(30),i=r(10),o=r(1),c=r(27),f=r(69).KEY,a=r(4),s=r(118),l=r(83),h=r(79),v=r(7),p=r(195),d=r(160),y=r(218),g=r(123),b=r(2),x=r(5),m=r(17),S=r(33),w=r(53),_=r(75),O=r(72),E=r(184),M=r(31),P=r(127),j=r(11),F=r(74),A=M.f,I=j.f,L=E.f,N=e.Symbol,T=e.JSON,k=T&&T.stringify,R="prototype",C=v("_hidden"),D=v("toPrimitive"),G={}.propertyIsEnumerable,W=s("symbol-registry"),U=s("symbols"),V=s("op-symbols"),B=Object[R],q="function"==typeof N&&!!P.f,z=e.QObject,K=!z||!z[R]||!z[R].findChild,H=i&&a(function(){return 7!=O(I({},"a",{get:function(){return I(this,"a",{value:7}).a}})).a})?function(t,n,r){var e=A(B,n);e&&delete B[n],I(t,n,r),e&&t!==B&&I(B,n,e)}:I,J=function(t){var n=U[t]=O(N[R]);return n._k=t,n},$=q&&"symbol"==typeof N.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof N},Y=function(t,n,r){return t===B&&Y(V,n,r),b(t),n=w(n,!0),b(r),u(U,n)?(r.enumerable?(u(t,C)&&t[C][n]&&(t[C][n]=!1),r=O(r,{enumerable:_(0,!1)})):(u(t,C)||I(t,C,_(1,{})),t[C][n]=!0),H(t,n,r)):I(t,n,r)},X=function(t,n){b(t);for(var r,e=y(n=S(n)),i=0,o=e.length;i<o;)Y(t,r=e[i++],n[r]);return t},Q=function(t){var n=G.call(this,t=w(t,!0));return!(this===B&&u(U,t)&&!u(V,t))&&(!(n||!u(this,t)||!u(U,t)||u(this,C)&&this[C][t])||n)},Z=function(t,n){if(t=S(t),n=w(n,!0),t!==B||!u(U,n)||u(V,n)){var r=A(t,n);return!r||!u(U,n)||u(t,C)&&t[C][n]||(r.enumerable=!0),r}},tt=function(t){for(var n,r=L(S(t)),e=[],i=0;r.length>i;)u(U,n=r[i++])||n==C||n==f||e.push(n);return e},nt=function(t){for(var n,r=t===B,e=L(r?V:S(t)),i=[],o=0;e.length>o;)!u(U,n=e[o++])||r&&!u(B,n)||i.push(U[n]);return i};q||(c((N=function(){if(this instanceof N)throw TypeError("Symbol is not a constructor!");var n=h(0<arguments.length?arguments[0]:void 0),r=function(t){this===B&&r.call(V,t),u(this,C)&&u(this[C],n)&&(this[C][n]=!1),H(this,n,_(1,t))};return i&&K&&H(B,n,{configurable:!0,set:r}),J(n)})[R],"toString",function(){return this._k}),M.f=Z,j.f=Y,r(73).f=E.f=tt,r(117).f=Q,P.f=nt,i&&!r(68)&&c(B,"propertyIsEnumerable",Q,!0),p.f=function(t){return J(v(t))}),o(o.G+o.W+o.F*!q,{Symbol:N});for(var rt="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),et=0;rt.length>et;)v(rt[et++]);for(var it=F(v.store),ot=0;it.length>ot;)d(it[ot++]);o(o.S+o.F*!q,"Symbol",{for:function(t){return u(W,t+="")?W[t]:W[t]=N(t)},keyFor:function(t){if(!$(t))throw TypeError(t+" is not a symbol!");for(var n in W)if(W[n]===t)return n},useSetter:function(){K=!0},useSimple:function(){K=!1}}),o(o.S+o.F*!q,"Object",{create:function(t,n){return void 0===n?O(t):X(O(t),n)},defineProperty:Y,defineProperties:X,getOwnPropertyDescriptor:Z,getOwnPropertyNames:tt,getOwnPropertySymbols:nt});var ut=a(function(){P.f(1)});o(o.S+o.F*ut,"Object",{getOwnPropertySymbols:function(t){return P.f(m(t))}}),T&&o(o.S+o.F*(!q||a(function(){var t=N();return"[null]"!=k([t])||"{}"!=k({a:t})||"{}"!=k(Object(t))})),"JSON",{stringify:function(t){for(var n,r,e=[t],i=1;arguments.length>i;)e.push(arguments[i++]);if(r=n=e[1],(x(n)||void 0!==t)&&!$(t))return g(n)||(n=function(t,n){if("function"==typeof r&&(n=r.call(this,t,n)),!$(n))return n}),e[1]=n,k.apply(T,e)}}),N[R][D]||r(26)(N[R],D,N[R].valueOf),l(N,"Symbol"),l(Math,"Math",!0),l(e.JSON,"JSON",!0)},function(t,n,r){"use strict";var e=r(1),i=r(132),o=r(159),a=r(2),s=r(78),l=r(8),u=r(5),c=r(3).ArrayBuffer,h=r(119),v=o.ArrayBuffer,p=o.DataView,f=i.ABV&&c.isView,d=v.prototype.slice,y=i.VIEW,g="ArrayBuffer";e(e.G+e.W+e.F*(c!==v),{ArrayBuffer:v}),e(e.S+e.F*!i.CONSTR,g,{isView:function(t){return f&&f(t)||u(t)&&y in t}}),e(e.P+e.U+e.F*r(4)(function(){return!new v(2).slice(1,void 0).byteLength}),g,{slice:function(t,n){if(void 0!==d&&void 0===n)return d.call(a(this),t);for(var r=a(this).byteLength,e=s(t,r),i=s(void 0===n?r:n,r),o=new(h(this,v))(l(i-e)),u=new p(this),c=new p(o),f=0;e<i;)c.setUint8(f++,u.getUint8(e++));return o}}),r(77)(g)},function(t,n,r){var e=r(1);e(e.G+e.W+e.F*!r(132).ABV,{DataView:r(159).DataView})},function(t,n,r){r(57)("Float32",4,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Float64",8,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Int16",2,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Int32",4,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Int8",1,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Uint16",2,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Uint32",4,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Uint8",1,function(e){return function(t,n,r){return e(this,t,n,r)}})},function(t,n,r){r(57)("Uint8",1,function(e){return function(t,n,r){return e(this,t,n,r)}},!0)},function(t,n,r){"use strict";var e=r(172),i=r(80);r(121)("WeakSet",function(t){return function(){return t(this,0<arguments.length?arguments[0]:void 0)}},{add:function(t){return e.def(i(this,"WeakSet"),t,!0)}},e,!1,!0)},function(t,n,r){"use strict";var e=r(1),i=r(173),o=r(17),u=r(8),c=r(21),f=r(138);e(e.P,"Array",{flatMap:function(t){var n,r,e=o(this);return c(t),n=u(e.length),r=f(e,0),i(r,e,e,n,0,1,t,arguments[1]),r}}),r(67)("flatMap")},function(t,n,r){"use strict";var e=r(1),i=r(173),o=r(17),u=r(8),c=r(49),f=r(138);e(e.P,"Array",{flatten:function(){var t=arguments[0],n=o(this),r=u(n.length),e=f(n,0);return i(e,n,n,r,0,void 0===t?1:c(t)),e}}),r(67)("flatten")},function(t,n,r){"use strict";var e=r(1),i=r(120)(!0);e(e.P,"Array",{includes:function(t){return i(this,t,1<arguments.length?arguments[1]:void 0)}}),r(67)("includes")},function(t,n,r){var e=r(1),i=r(150)(),o=r(3).process,u="process"==r(45)(o);e(e.G,{asap:function(t){var n=u&&o.domain;i(n?n.bind(t):t)}})},function(t,n,r){var e=r(1),i=r(45);e(e.S,"Error",{isError:function(t){return"Error"===i(t)}})},function(t,n,r){var e=r(1);e(e.G,{global:r(3)})},function(t,n,r){r(129)("Map")},function(t,n,r){r(130)("Map")},function(t,n,r){var e=r(1);e(e.P+e.R,"Map",{toJSON:r(171)("Map")})},function(t,n,r){var e=r(1);e(e.S,"Math",{clamp:function(t,n,r){return Math.min(r,Math.max(n,t))}})},function(t,n,r){var e=r(1);e(e.S,"Math",{DEG_PER_RAD:Math.PI/180})},function(t,n,r){var e=r(1),i=180/Math.PI;e(e.S,"Math",{degrees:function(t){return t*i}})},function(t,n,r){var e=r(1),o=r(181),u=r(179);e(e.S,"Math",{fscale:function(t,n,r,e,i){return u(o(t,n,r,e,i))}})},function(t,n,r){var e=r(1);e(e.S,"Math",{iaddh:function(t,n,r,e){var i=t>>>0,o=r>>>0;return(n>>>0)+(e>>>0)+((i&o|(i|o)&~(i+o>>>0))>>>31)|0}})},function(t,n,r){var e=r(1);e(e.S,"Math",{imulh:function(t,n){var r=+t,e=+n,i=65535&r,o=65535&e,u=r>>16,c=e>>16,f=(u*o>>>0)+(i*o>>>16);return u*c+(f>>16)+((i*c>>>0)+(65535&f)>>16)}})},function(t,n,r){var e=r(1);e(e.S,"Math",{isubh:function(t,n,r,e){var i=t>>>0,o=r>>>0;return(n>>>0)-(e>>>0)-((~i&o|~(i^o)&i-o>>>0)>>>31)|0}})},function(t,n,r){var e=r(1);e(e.S,"Math",{RAD_PER_DEG:180/Math.PI})},function(t,n,r){var e=r(1),i=Math.PI/180;e(e.S,"Math",{radians:function(t){return t*i}})},function(t,n,r){var e=r(1);e(e.S,"Math",{scale:r(181)})},function(t,n,r){var e=r(1);e(e.S,"Math",{signbit:function(t){return(t=+t)!=t?t:0==t?1/t==1/0:0<t}})},function(t,n,r){var e=r(1);e(e.S,"Math",{umulh:function(t,n){var r=+t,e=+n,i=65535&r,o=65535&e,u=r>>>16,c=e>>>16,f=(u*o>>>0)+(i*o>>>16);return u*c+(f>>>16)+((i*c>>>0)+(65535&f)>>>16)}})},function(t,n,r){"use strict";var e=r(1),i=r(17),o=r(21),u=r(11);r(10)&&e(e.P+r(126),"Object",{__defineGetter__:function(t,n){u.f(i(this),t,{get:o(n),enumerable:!0,configurable:!0})}})},function(t,n,r){"use strict";var e=r(1),i=r(17),o=r(21),u=r(11);r(10)&&e(e.P+r(126),"Object",{__defineSetter__:function(t,n){u.f(i(this),t,{set:o(n),enumerable:!0,configurable:!0})}})},function(t,n,r){var e=r(1),i=r(186)(!0);e(e.S,"Object",{entries:function(t){return i(t)}})},function(t,n,r){var e=r(1),f=r(187),a=r(33),s=r(31),l=r(139);e(e.S,"Object",{getOwnPropertyDescriptors:function(t){for(var n,r,e=a(t),i=s.f,o=f(e),u={},c=0;o.length>c;)void 0!==(r=i(e,n=o[c++]))&&l(u,n,r);return u}})},function(t,n,r){"use strict";var e=r(1),i=r(17),o=r(53),u=r(32),c=r(31).f;r(10)&&e(e.P+r(126),"Object",{__lookupGetter__:function(t){var n,r=i(this),e=o(t,!0);do{if(n=c(r,e))return n.get}while(r=u(r))}})},function(t,n,r){"use strict";var e=r(1),i=r(17),o=r(53),u=r(32),c=r(31).f;r(10)&&e(e.P+r(126),"Object",{__lookupSetter__:function(t){var n,r=i(this),e=o(t,!0);do{if(n=c(r,e))return n.set}while(r=u(r))}})},function(t,n,r){var e=r(1),i=r(186)(!1);e(e.S,"Object",{values:function(t){return i(t)}})},function(t,n,r){"use strict";var e=r(1),o=r(3),u=r(46),i=r(150)(),c=r(7)("observable"),f=r(21),a=r(2),s=r(70),l=r(76),h=r(26),v=r(71),p=v.RETURN,d=function(t){return null==t?void 0:f(t)},y=function(t){var n=t._c;n&&(t._c=void 0,n())},g=function(t){return void 0===t._o},b=function(t){g(t)||(t._o=void 0,y(t))},x=function(t,n){a(t),this._c=void 0,this._o=t,t=new m(this);try{var r=n(t),e=r;null!=r&&("function"==typeof r.unsubscribe?r=function(){e.unsubscribe()}:f(r),this._c=r)}catch(n){return void t.error(n)}g(this)&&y(this)};x.prototype=l({},{unsubscribe:function(){b(this)}});var m=function(t){this._s=t};m.prototype=l({},{next:function(t){var n=this._s;if(!g(n)){var r=n._o;try{var e=d(r.next);if(e)return e.call(r,t)}catch(t){try{b(n)}finally{throw t}}}},error:function(t){var n=this._s;if(g(n))throw t;var r=n._o;n._o=void 0;try{var e=d(r.error);if(!e)throw t;t=e.call(r,t)}catch(t){try{y(n)}finally{throw t}}return y(n),t},complete:function(t){var n=this._s;if(!g(n)){var r=n._o;n._o=void 0;try{var e=d(r.complete);t=e?e.call(r,t):void 0}catch(t){try{y(n)}finally{throw t}}return y(n),t}}});var S=function(t){s(this,S,"Observable","_f")._f=f(t)};l(S.prototype,{subscribe:function(t){return new x(t,this._f)},forEach:function(e){var i=this;return new(u.Promise||o.Promise)(function(t,n){f(e);var r=i.subscribe({next:function(t){try{return e(t)}catch(t){n(t),r.unsubscribe()}},error:n,complete:t})})}}),l(S,{from:function(t){var n="function"==typeof this?this:S,r=d(a(t)[c]);if(r){var e=a(r.call(t));return e.constructor===n?e:new n(function(t){return e.subscribe(t)})}return new n(function(n){var r=!1;return i(function(){if(!r){try{if(v(t,!1,function(t){if(n.next(t),r)return p})===p)return}catch(t){if(r)throw t;return void n.error(t)}n.complete()}}),function(){r=!0}})},of:function(){for(var t=0,n=arguments.length,e=new Array(n);t<n;)e[t]=arguments[t++];return new("function"==typeof this?this:S)(function(n){var r=!1;return i(function(){if(!r){for(var t=0;t<e.length;++t)if(n.next(e[t]),r)return;n.complete()}}),function(){r=!0}})}}),h(S.prototype,c,function(){return this}),e(e.G,{Observable:S}),r(77)("Observable")},function(t,n,r){"use strict";var e=r(1),i=r(46),o=r(3),u=r(119),c=r(191);e(e.P+e.R,"Promise",{finally:function(n){var r=u(this,i.Promise||o.Promise),t="function"==typeof n;return this.then(t?function(t){return c(r,n()).then(function(){return t})}:n,t?function(t){return c(r,n()).then(function(){throw t})}:n)}})},function(t,n,r){"use strict";var e=r(1),i=r(151),o=r(190);e(e.S,"Promise",{try:function(t){var n=i.f(this),r=o(t);return(r.e?n.reject:n.resolve)(r.v),n.promise}})},function(t,n,r){var e=r(56),i=r(2),o=e.key,u=e.set;e.exp({defineMetadata:function(t,n,r,e){u(t,n,i(r),o(e))}})},function(t,n,r){var e=r(56),o=r(2),u=e.key,c=e.map,f=e.store;e.exp({deleteMetadata:function(t,n){var r=arguments.length<3?void 0:u(arguments[2]),e=c(o(n),r,!1);if(void 0===e||!e.delete(t))return!1;if(e.size)return!0;var i=f.get(n);return i.delete(r),!!i.size||f.delete(n)}})},function(t,n,r){var o=r(199),u=r(167),e=r(56),i=r(2),c=r(32),f=e.keys,a=e.key,s=function(t,n){var r=f(t,n),e=c(t);if(null===e)return r;var i=s(e,n);return i.length?r.length?u(new o(r.concat(i))):i:r};e.exp({getMetadataKeys:function(t){return s(i(t),arguments.length<2?void 0:a(arguments[1]))}})},function(t,n,r){var e=r(56),i=r(2),o=r(32),u=e.has,c=e.get,f=e.key,a=function(t,n,r){if(u(t,n,r))return c(t,n,r);var e=o(n);return null!==e?a(t,e,r):void 0};e.exp({getMetadata:function(t,n){return a(t,i(n),arguments.length<3?void 0:f(arguments[2]))}})},function(t,n,r){var e=r(56),i=r(2),o=e.keys,u=e.key;e.exp({getOwnMetadataKeys:function(t){return o(i(t),arguments.length<2?void 0:u(arguments[1]))}})},function(t,n,r){var e=r(56),i=r(2),o=e.get,u=e.key;e.exp({getOwnMetadata:function(t,n){return o(t,i(n),arguments.length<3?void 0:u(arguments[2]))}})},function(t,n,r){var e=r(56),i=r(2),o=r(32),u=e.has,c=e.key,f=function(t,n,r){if(u(t,n,r))return!0;var e=o(n);return null!==e&&f(t,e,r)};e.exp({hasMetadata:function(t,n){return f(t,i(n),arguments.length<3?void 0:c(arguments[2]))}})},function(t,n,r){var e=r(56),i=r(2),o=e.has,u=e.key;e.exp({hasOwnMetadata:function(t,n){return o(t,i(n),arguments.length<3?void 0:u(arguments[2]))}})},function(t,n,r){var e=r(56),i=r(2),o=r(21),u=e.key,c=e.set;e.exp({metadata:function(r,e){return function(t,n){c(r,e,(void 0!==n?i:o)(t),u(n))}}})},function(t,n,r){r(129)("Set")},function(t,n,r){r(130)("Set")},function(t,n,r){var e=r(1);e(e.P+e.R,"Set",{toJSON:r(171)("Set")})},function(t,n,r){"use strict";var e=r(1),i=r(131)(!0);e(e.P,"String",{at:function(t){return i(this,t)}})},function(t,n,r){"use strict";var e=r(1),i=r(51),o=r(8),u=r(124),c=r(115),f=RegExp.prototype,a=function(t,n){this._r=t,this._s=n};r(146)(a,"RegExp String",function(){var t=this._r.exec(this._s);return{value:t,done:null===t}}),e(e.P,"String",{matchAll:function(t){if(i(this),!u(t))throw TypeError(t+" is not a regexp!");var n=String(this),r="flags"in f?String(t.flags):c.call(t),e=new RegExp(t.source,~r.indexOf("g")?r:"g"+r);return e.lastIndex=o(t.lastIndex),new a(e,n)}})},function(t,n,r){"use strict";var e=r(1),i=r(193),o=r(133),u=/Version\/10\.\d+(\.\d+)?( Mobile\/\w+)? Safari\//.test(o);e(e.P+e.F*u,"String",{padEnd:function(t){return i(this,t,1<arguments.length?arguments[1]:void 0,!1)}})},function(t,n,r){"use strict";var e=r(1),i=r(193),o=r(133),u=/Version\/10\.\d+(\.\d+)?( Mobile\/\w+)? Safari\//.test(o);e(e.P+e.F*u,"String",{padStart:function(t){return i(this,t,1<arguments.length?arguments[1]:void 0,!0)}})},function(t,n,r){"use strict";r(84)("trimLeft",function(t){return function(){return t(this,1)}},"trimStart")},function(t,n,r){"use strict";r(84)("trimRight",function(t){return function(){return t(this,2)}},"trimEnd")},function(t,n,r){r(160)("asyncIterator")},function(t,n,r){r(160)("observable")},function(t,n,r){var e=r(1);e(e.S,"System",{global:r(3)})},function(t,n,r){r(129)("WeakMap")},function(t,n,r){r(130)("WeakMap")},function(t,n,r){r(129)("WeakSet")},function(t,n,r){r(130)("WeakSet")},function(t,n,r){for(var e=r(162),i=r(74),o=r(27),u=r(3),c=r(26),f=r(82),a=r(7),s=a("iterator"),l=a("toStringTag"),h=f.Array,v={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},p=i(v),d=0;d<p.length;d++){var y,g=p[d],b=v[g],x=u[g],m=x&&x.prototype;if(m&&(m[s]||c(m,s,h),m[l]||c(m,l,g),f[g]=h,b))for(y in e)m[y]||o(m,y,e[y],!0)}},function(t,n,r){var e=r(1),i=r(158);e(e.G+e.B,{setImmediate:i.set,clearImmediate:i.clear})},function(t,n,r){var e=r(3),i=r(1),o=r(133),u=[].slice,c=/MSIE .\./.test(o),f=function(i){return function(t,n){var r=2<arguments.length,e=!!r&&u.call(arguments,2);return i(r?function(){("function"==typeof t?t:Function(t)).apply(this,e)}:t,n)}};i(i.G+i.B+i.F*c,{setTimeout:f(e.setTimeout),setInterval:f(e.setInterval)})},function(t,n,r){r(341),r(280),r(282),r(281),r(284),r(286),r(291),r(285),r(283),r(293),r(292),r(288),r(289),r(287),r(279),r(290),r(294),r(295),r(247),r(249),r(248),r(297),r(296),r(267),r(277),r(278),r(268),r(269),r(270),r(271),r(272),r(273),r(274),r(275),r(276),r(250),r(251),r(252),r(253),r(254),r(255),r(256),r(257),r(258),r(259),r(260),r(261),r(262),r(263),r(264),r(265),r(266),r(328),r(333),r(340),r(331),r(323),r(324),r(329),r(334),r(336),r(319),r(320),r(321),r(322),r(325),r(326),r(327),r(330),r(332),r(335),r(337),r(338),r(339),r(242),r(244),r(243),r(246),r(245),r(231),r(229),r(235),r(232),r(238),r(240),r(228),r(234),r(225),r(239),r(223),r(237),r(236),r(230),r(233),r(222),r(224),r(227),r(226),r(241),r(162),r(313),r(197),r(318),r(198),r(314),r(315),r(316),r(317),r(298),r(196),r(199),r(200),r(353),r(342),r(343),r(348),r(351),r(352),r(346),r(349),r(347),r(350),r(344),r(345),r(299),r(300),r(301),r(302),r(303),r(306),r(304),r(305),r(307),r(308),r(309),r(310),r(312),r(311),r(356),r(354),r(355),r(397),r(400),r(399),r(401),r(402),r(398),r(403),r(404),r(378),r(381),r(377),r(375),r(376),r(379),r(380),r(362),r(396),r(361),r(395),r(407),r(409),r(360),r(394),r(406),r(408),r(359),r(405),r(358),r(363),r(364),r(365),r(366),r(367),r(369),r(368),r(370),r(371),r(372),r(374),r(373),r(383),r(384),r(385),r(386),r(388),r(387),r(390),r(389),r(391),r(392),r(393),r(357),r(382),r(412),r(411),r(410),t.exports=r(46)},function(t,n){t.exports=function(t,n){if("string"==typeof n)return t.insertAdjacentHTML("afterend",n);var r=t.nextSibling;return r?t.parentNode.insertBefore(n,r):t.parentNode.appendChild(n)}}])</script><script src="/./main.b8fa34.js"></script><script>!function(){var e,t;e="/slider.b6a41a.js",t=document.createElement("script"),document.getElementsByTagName("body")[0].appendChild(t),t.setAttribute("src",e)}()</script>



<!--  -->

<script>
  /* 标签页标题切换 */
  var originTitle = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function () {
    if (document.hidden) {
      document.title = "(つェ⊂) 我藏好了哦~ " + originTitle;
      clearTimeout(titleTime);
    } else {
      document.title = "(*´∇｀*) 被你发现啦~ " + originTitle;
      titleTime = setTimeout(function () {
        document.title = originTitle;
      }, 2000);
    }
  });
</script>


    
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-nav header-menu">
    
    
      
      
      
    
      
      
      
    
      
      
      
    
    

    <ul style="width: 70%">
    
    
      
      <li style="width: 33.333333333333336%" q-on="click: openSlider(e, 'innerArchive')"><a href="javascript:void(0)" q-class="active:innerArchive">所有文章</a></li>
      
        
      
      <li style="width: 33.333333333333336%" q-on="click: openSlider(e, 'friends')"><a href="javascript:void(0)" q-class="active:friends">友链</a></li>
      
        
      
      <li style="width: 33.333333333333336%" q-on="click: openSlider(e, 'aboutme')"><a href="javascript:void(0)" q-class="active:aboutme">关于我</a></li>
      
        
    </ul>
  </div>
  <div class="tools-wrap">
    
    	<section class="tools-section tools-section-all" q-show="innerArchive">
        <div class="search-wrap">
          <input class="search-ipt" q-model="search" type="text" placeholder="find something…">
          <i class="icon-search icon" q-show="search|isEmptyStr"></i>
          <i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
        </div>
        <div class="widget tagcloud search-tag">
          <p class="search-tag-wording">tag:</p>
          <label class="search-switch">
            <input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
          </label>
          <ul class="article-tag-list" q-show="showTags">
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">mac 快捷键、mac操作</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">React</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">React笔记</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">V8引擎</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">GET</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">POST</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color2">算法 leetcode</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color2">Node mongod</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">typescript笔记</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">JSDoc</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color2">英文专有名词</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">UT</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">小程序</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">微信小程序</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">浏览器</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">经验 经历</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">设计模式</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">重构</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">随手笔记</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">平时遇到的问题</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">Ajax</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">ES6</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">javaScript高级程序</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color2">vue3源码</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">vue</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color2">vue3.0</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color2">Object</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">引用类型</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">linux</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">nextTick</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">event loop</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">Axios</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color1">vue的坑</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">分享会</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">pnpm</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">monorepo</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">yarn</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">workspace</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">promise</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color5">年度总结</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">反思</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color3">房子</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)" class="js-tag color4">面试题</a>
              </li>
            
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="search-ul">
          <p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
            缺失模块。<br/>1、请确保node版本大于6.2<br/>2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
            3、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
</pre>
          </p>
          <li class="search-li" q-repeat="items" q-show="isShow">
            <a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
            <p class="search-time">
              <i class="icon-calendar icon"></i>
              <span q-text="date|dateformat"></span>
            </p>
            <p class="search-tag">
              <i class="icon-price-tags icon"></i>
              <span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
            </p>
          </li>
        </ul>
    	</section>
    

    
    	<section class="tools-section tools-section-friends" q-show="friends">
  		
        <ul class="search-ul">
          
            <li class="search-li">
              <a href="https://littleki.gitee.io/blog/" target="_blank" class="search-title" title="记录工作和学习过程中的笔记：Java、前端开发、Hexo博客、聚合支付、Linux笔记、ElasticSearch、ELK日志分析">
                
                  <img src="https://zhousiwei.gitee.io/ibooks/favicon.ico">
                
                技术笔记
              </a>
            </li>
          
            <li class="search-li">
              <a href="https://github.com/littlekie" target="_blank" class="search-title" >
                
                  <i class="icon-link icon"></i>
                
                GitHub
              </a>
            </li>
          
            <li class="search-li">
              <a href="https://gitee.com/littleki" target="_blank" class="search-title" >
                
                  <i class="icon-link icon"></i>
                
                码云
              </a>
            </li>
          
        </ul>
  		
    	</section>
    

    
    	<section class="tools-section tools-section-me" q-show="aboutme">
        
          
  	  		<div class="aboutme-wrap" id="aboutme">告诫自己要不断的学习，<br>否则你永远比别人低n个高度</div>
  	  	
    	</section>
    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>

  
  
<script type="text/javascript" src="/plugins/activate-power-mode/activate-power-mode.js"></script>
<script>
  POWERMODE.colorful = true; // make power mode colorful
  POWERMODE.shake = false; // turn off shake
  document.body.addEventListener('input', POWERMODE);
</script>

  
  <!-- <script async type="text/javascript" size="90" alpha="0.2" zIndex="0" src="/plugins/ribbon.js/ribbon.min.js"></script> -->
  
  
  
</body>

</html>
